如何让 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");
    }
}

然后在视图中：

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

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

这之后我很迷茫。

我希望能够做两件事：

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

非常感谢对此的任何指示。

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

(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。可悲的是，我仍然没有弄清楚为什么。

来源：

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

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

How to get FileUpload working in WASM for Uno Platform

uno-platform