将文件从javascript发送到blazor

Question

我使用Summernote作为文本编辑器。我想将图像保存在我的API目录中。因此，当我在JavaScript文件中获得文件时，我如何将其发送到Blazor(我不想通过jQueryajax将其直接发送到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

所以。。。您正在创建一个名为"；数据"；并将文件附加到其中。

data = new FormData();

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

然后您将通过；数据"；Blazor 中C#方法的反对意见

dotNetObject.invokeMethodAsync('UploadEditorImage'，data(

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);
// ...
}
}