uno-platform - 如何让 FileUpload 在 WASM for Uno Platform 中工作

Question

我正在尝试让 HTML 文件上传控件在 WASM 上运行。到目前为止，我已尝试执行以下操作:

[HtmlElement("input")]
public class FilePickerView : FrameworkElement
{
    public FilePickerView()
    {
        // XAML behavior: a non-null background is required on an element to be "visible to pointers".
        // Uno reproduces this behavior, so we must set it here even if we're not using the background.
        // Not doing this will lead to a `pointer-events: none` CSS style on the control.
        Background = new SolidColorBrush(Colors.Transparent);

        this.SetHtmlAttribute("type", "file");
    }
}

然后在 View 中:

<wasm:FilePickerView Height="35"  Width="300" x:Name="filePicker" HorizontalAlignment="Left" />

我显示了控件，我可以单击它，它会显示我选择的文件的名称。

在这之后我很迷茫。

我希望能够做两件事:

1. 在代码隐藏中访问文件路径。
2. 将文件内容发送到代码隐藏进行处理。

将不胜感激任何关于此的指示。

我已经阅读了文档中的以下页面:

• (Wasm) 处理自定义 HTML 事件 - https://qa.website.platform.uno/docs/articles/wasm-custom-events.html
• 将现有的 JavaScript 组件嵌入 Uno-WASM - 第 1 部分 - https://qa.website.platform.uno/docs/articles/interop/wasm-javascript-1.html
• 将现有的 JavaScript 组件嵌入 Uno-WASM - 第 2 部分 - https://qa.website.platform.uno/docs/articles/interop/wasm-javascript-2.html
• 将现有的 JavaScript 组件嵌入 Uno-WASM - 第 3 部分 - https://qa.website.platform.uno/docs/articles/interop/wasm-javascript-3.html

Answer 1

在连接网上的碎片后，我想出了这个方法。但是，它仅适用于最大 500 kb 的文件。

为了启用大文件上传，我必须将 wasm 目标升级到 .net 5 并使用 Uno.Wasm.Bootstrap 和 Uno.WasmBootstrap.DevServer 的开发者版本 (2.0.0-dev.167)(描述了如何升级目标here ).

在此代码中，我启用了仅上传 .wav 音频文件

   private async void uploadBtn_Click(object sender, RoutedEventArgs e)
       {
           FileSelectedEvent -=OnFileUploadedEvent;
           FileSelectedEvent += OnFileUploadedEvent;
           
           WebAssemblyRuntime.InvokeJS(@"
               var input = document.createElement('input');
               input.type = 'file';
               input.accept = '.wav';
               input.onchange = e => {
                   var file = e.target.files[0];
                       var reader = new FileReader();
                       reader.readAsDataURL(file);
                       reader.onload = readerEvent => {
                           //this is the binary uploaded content
                           var content = readerEvent.target.result; 
                           //invoke C# method to get audio binary data
                           var selectFile = Module.mono_bind_static_method(" + "\"[MyApp.Wasm] MyApp.Shared.MyPage:SelectFile\""+@");
                           selectFile(content);
                       
                   };
               };
               input.click(); "
           );
       }
       public static void SelectFile(string fileAsDataUrl) => FileSelectedEvent?.Invoke(null, new FileSelectedEventHandlerArgs(fileAsDataUrl));

       private void OnFileUploadedEvent(object sender, FileSelectedEventHandlerArgs e)
       {
           FileSelectedEvent -= OnFileUploadedEvent;
           var base64Data = Regex.Match(e.FileAsDataUrl, @"data:audio/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
           var binData = Convert.FromBase64String(base64Data); //this is the data I want
           Console.Out.WriteLine("I got binary data of uploaded file");
       }

       private static event FileSelectedEventHandler FileSelectedEvent;

       private delegate void FileSelectedEventHandler(object sender, FileSelectedEventHandlerArgs args);

       private class FileSelectedEventHandlerArgs
       {
           public string FileAsDataUrl { get; }
           public FileSelectedEventHandlerArgs(string fileAsDataUrl) => FileAsDataUrl = fileAsDataUrl;

       }

此外，我无法同时使用 SQLite 运行它。可悲的是，我仍然没有弄清楚原因。

来源:

• https://github.com/unoplatform/uno/issues/508
• https://github.com/unoplatform/uno/issues/3525
• https://platform.uno/blog/uno-platform-3-2-net-5-c-9-support-and-net-5-webassembly-aot-support/

编辑:显然，适用于 .NET 5/6 的 SQLite 仍在进行中，有些包需要更改。