1

我正在开发一个简单的 blazor 应用程序，它接收文件上传并存储它。我正在使用 BlazorInputFile，但我无法弄清楚为什么将流复制到 MemoryStream 会导致浏览器冻结。

此博客文章中解释了如何使用（以及如何实现）BlazorInputFile的详细信息：在 Blazor 中上传文件。

 var ms = new MemoryStream();
 await file.Data.CopyToAsync(ms); // With a 1MB file, this line took 3 seconds, and froze the browser

 status = $"Finished loading {file.Size} bytes from {file.Name}";

示例项目/repo：https://github.com/paulallington/BlazorInputFileIssue （这只是默认的 Blazor 应用程序，BlazorInputFile 按照文章实现）

4

3 回答 3

1

我遇到过同样的问题。我已经尝试了两个预定义组件，例如 Steve Sanderssons 文件上传和 MatBlazor 文件上传，以及我自己的处理文件上传的组件。小文件不是问题。一旦文件变大一点，UI 就会自行挂起。MemoryOutOfBoundsException（或类似的）。所以不，async/await 不能帮助你释放 UI。我在这个问题上付出了很多努力，我目前正在使用的一种解决方案是使用 javascript 而不是 blazor 进行所有文件上传。只需使用 javascript 获取文件并将其发布到服务器。没有 JSInterop。但是，这似乎是 webassembly 单声道中的内存问题。在此处阅读更多信息：https ://github.com/dotnet/aspnetcore/issues/15777

注意：我还没有在最新的 Blazor 版本上尝试过这个。所以我不确定它是否已修复。

于 2020-05-08T10:53:37.757 回答
1

使用await Task.Delay(1);正如吕志在这篇文章中的评论中提到的那样使用blazor-webassembly 上传文件不能显示进度？

var buffer = new byte[imageFile.Size];
await Task.Delay(1);

await imageFile.OpenReadStream(Int64.MaxValue).ReadAsync(buffer);

pratica.Files.Add(new FilePraticaRequest()
{
    Contenuto = buffer,
    Nome = imageFile.Name,

});
StateHasChanged();
于 2020-12-02T10:16:29.523 回答
0

您等待复制结果，因此应用程序冻结，您可以像这样重构代码；

var ms = new MemoryStream();
file.Data.CopyToAsync(ms).ContinueWith(async task => 
{
   if (task.Exception != null)
   {
      throw task.Exception; // Update this by your convenience
   }
   status = $"Finished loading {file.Size} bytes from {file.Name}";
   await InvokeAsync(StateHasChanged).ConfigureAwait(false); // informs the component the status changed
}; // With a 1MB file, this line took 3 seconds, and should not froze the browser
于 2020-05-06T06:54:24.137 回答