内存文件上传期间 Blazor UI 挂起

Question

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

如何使用（以及如何实现）BlazorInputFile 的详细信息在这篇博文中进行了解释：Uploading Files in 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）

Answer 1

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

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

Answer 2

使用await Task.Delay(1);，正如吕志在这篇文章中的评论中提到的blazor-webassembly upload file can't show progress?

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();

Answer 3

你等待复制结果，所以应用程序冻结，你可以像这样重构你的代码；

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