将文件从 javascript 发送到 blazor

Question

我使用Summernote 作为我的文本编辑器。我想将图像保存在我的 API 目录中。因此，当我在 JavaScript 文件中获取文件时，如何将其发送到 Blazor（我不想通过 jQuery ajax 直接将其发送到 API）。

window.JsFunctions = {
    LoadSummerNote: function (dotNetObject) {
        $('.summerText').summernote({
            height: 300,
            minHeight: 100,
            maxHeight: null,
            focus: false,
            callbacks: {
                onImageUpload: function (files) {
                    //data = files[0]
                    data = new FormData();
                    data.append("file", files[0]);
                    dotNetObject.invokeMethodAsync('UploadEditorImage', data)
                }
            }
        });
    }
}

我的问题出在Blazor 部分，我无法让文件继续我想做的事情。

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

我收到这样的错误

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

Answer 1

所以... 您正在创建一个名为“数据”的 FormData 对象并将文件附加到它。

data = new FormData();

data.append("file", files[0]);

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

dotNetObject.invokeMethodAsync('UploadEditorImage', 数据)

Blazor 中的 C# 方法期望将实现 IBrowserFile 接口类型的对象传递给它...这是失败的...

公共异步任务 UploadEditorImage(IBrowserFile 文件)

假设 (files) 是文件的字符串数组

onImageUpload：函数（文件）

解决这个问题的最简单方法，考虑到你有 FilePath 可能是这样的...... 将文件路径数组传递给 dotNet 方法的位置。

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

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

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