如何使用 Blazor 上传文件？

Question

我找到了BlazorInputFile库，但是从 2019 年 10 月开始仍然有开放的 PR，我不确定这个库是否还在维护。另外，我在博客中找到了几篇关于如何在 Blazor 中使用 JS 上传文件的文章。如果可能的话，我不想使用 JS，但我确实需要使用 Blazor 上传文件……是否可以在不使用 JavaScript 的情况下这样做？

Answer 1

我正在尝试安装SteveSandersonMS 的 repo，然后意识到，截至 2021 年 2 月，InputFileASP.NET Core 5.0 中实际上有一个本机组件。

它支持在 Blazor 中上传单个和多个文件，并且易于使用（并且您不需要添加自己的 JS 文件等）。

我将它用于单个文件上传 - 您需要做的就是InputFile在 Razor 页面中添加组件：

<InputFile OnChange="@SingleUpload" />

然后在我的情况下，我需要字节数组中的文件：

@code {

   private async Task SingleUpload(InputFileChangeEventArgs e)
   {
       MemoryStream ms = new MemoryStream();
       await e.File.OpenReadStream().CopyToAsync(ms);
       var bytes = ms.ToArray();
       //do something with bytes
   }
}

InputFileChangeEventArgs给你一个IReadOnlyList的IBrowserFile，你可以用它来得到Name，LastModified，Size和ContentType，还有一个OpenReadStream方法得到一个Stream。

有关于如何在ASP.NET 文档中获取多个文件的良好文档和代码。

您还需要添加System.IO命名空间：

@using System.IO

Answer 2

以目前的情况（截至2020年4月2日），你将需要JS，这是不可避免的。

您可以采取两种主要方法：

• onchange在发生输入时获取文件数据，并通过将 传递给 C# 方法来调用byte[]它们 - 这基本上是您链接的文件选择器方法，您可以在 Blazor 应用程序中获取文件数据以执行您想要的任何操作。

• 在输入时获取文件数据onchange，并使用 JS 调用将接收文件并对其执行某些操作的远程端点（例如将其保存在 NAS 上或将其放入数据库中）。这是实际的文件上传，而不是文件选择器。

从编码的角度来看，这两种方法是相似的——你需要 JS。也许在 Blazor 的未来版本中，我们将获得一个<InputFile>可以进行选择的工具，以便您可以使用 C# HTTP 请求进行上传。

文件选择器方法相对容易实现（实际上是几行），但它不会在服务器上为您提供文件，您必须做一些工作。文件上传方法更难正确执行。我个人会使用别人的软件包。对于文件上传，诸如Telerik UI for Blazor之类的东西可能适合商业用途，而对于更简单的选择器，已经有另一个链接示例的答案。顺便说一句，Telerik 的演示也有一个这样的示例，作为为某些演示实现的组件。