如何让 FileUpload 在 WASM 中为 Uno 平台工作答案

【问题标题】：How to get FileUpload working in WASM for Uno Platform如何让 FileUpload 在 WASM 中为 Uno 平台工作
【发布时间】：2021-02-13 00:09:30
【问题描述】：

我正在尝试让 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

【问题讨论】：

标签： uno-platform

【解决方案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 仍在进行中，并且有一些包需要更改。

【讨论】：

谢谢。决定暂时离开 Uno，因为让这些工作太痛苦了。接受您的回答，因为它似乎解决了问题。