将文件从javascript发送到blazor

我使用

Summernote

作为我的文本编辑器。我想在API目录中保存图像。因此，当我在JavaScript文件中获取文件时，我如何将其发送到

Blazor

（我不想通过

jQuery

ajax直接发送到API）

window.JsFunctions={
LoadSummerNote:函数（dotNetObject）{
$（'.summerText'）.summernote({
身高：300，
身高：100，
maxHeight:null，
焦点：错误，
回调：{
onImageUpload:函数（文件）{
//数据=文件[0]
数据=新表单数据（）；
data.append（“文件”，文件[0]）；
dotNetObject.invokeMethodAsync（'UploadEditorImage'，数据）
}
}
});
}
}

我的问题是在

Blazor

部分，我无法让文件继续我想做的事情

[JSInvokable]
公共异步任务UploadEditorImage（IBrowserFile文件）
{
// ...
//var result=await UploadService.Upload（文件、allowedExtensions、maxFileSize、uploadFolder）；
// ...
}

我犯了这样的错误

未捕获（承诺中）错误：System.NotSupportedException: 不支持接口类型的反序列化。类型 'Microsoft.AspNetCore.Components.Forms.IBrowserFile'。路径：$| 行号：0 |字节位置行号：1。--> System.NotSupportedException：接口类型的反序列化不可用 不支持。类型 'Microsoft.AspNetCore.Components.Forms.IBrowserFile'

所以。。。 您正在创建一个名为“data”的FormData对象，并将文件附加到该对象

data=newformdata（）

data.append（“文件”，文件[0]）

然后将“数据”对象传递给Blazor中的C#方法

dotNetObject.invokeMethodAsync（'UploadEditorImage'，数据）

Blazor中的C#方法期望将一个实现了IBrowserFile接口类型的对象传递给它。。。这就是失败的地方

公共异步任务UploadEditorImage（IBrowserFile文件）

假设（文件）是文件的字符串数组

onImageUpload:函数（文件）

最简单的解决方法是，考虑到您有文件路径，可能是这样的。。。
将文件路径数组传递给dotNet方法

window.JsFunctions = {
    LoadSummerNote: function (dotNetObject) {
        $('.summerText').summernote({
            height: 300,
            minHeight: 100,
            maxHeight: null,
            focus: false,
            callbacks: {
                onImageUpload: function (files) {
                    dotNetObject.invokeMethodAsync('UploadEditorImage', files)
                }
            }
        });
    }
}

[JSInvokable]
public async Task UploadEditorImage(string[] files)
{
  foreach (string file in files)
  {
    // ...
    // var result = await UploadService.Upload(file, allowedExtensions, maxFileSize, uploadFolder);
    // ...
  }
}

然后在dotNet方法中处理文件数组

window.JsFunctions = {
    LoadSummerNote: function (dotNetObject) {
        $('.summerText').summernote({
            height: 300,
            minHeight: 100,
            maxHeight: null,
            focus: false,
            callbacks: {
                onImageUpload: function (files) {
                    dotNetObject.invokeMethodAsync('UploadEditorImage', files)
                }
            }
        });
    }
}

[JSInvokable]
public async Task UploadEditorImage(string[] files)
{
  foreach (string file in files)
  {
    // ...
    // var result = await UploadService.Upload(file, allowedExtensions, maxFileSize, uploadFolder);
    // ...
  }
}

错误告诉您它不知道如何反序列化接口（因为我想它怎么知道您想要构造哪个对象）。您尝试过具体类型吗？文档非常详细，请参阅@Nikki9696是的，我尝试过，但收到的结果为空。@Matze这与我的问题无关。我的问题不同于通常的上传。作为旁注。。。这可能也很有趣。。Summernote的基本包装器，可用于嵌入Blazor页面。。它将把放入Summernote内容窗口的任何图像序列化为Base64字符串以及所有格式设置等。[BlazingComponents-Summernote示例][1][1]：