Blazor 怎么实现文件上传

blazor 文件上传依赖 inputfile 组件（仅限交互式渲染模式），通过 onchange 获取 ibrowserfile 并读取流，配合 httpclient 上传至后端 api；需注意大小限制、进度手动实现及服务端配置。

Blazor 实现文件上传主要靠 InputFile 组件（仅支持 Blazor WebAssembly 和 Blazor Server 的交互式渲染模式），配合后端 API 或直接在客户端处理。核心是捕获文件流、控制上传逻辑、处理进度和错误。

使用 InputFile 组件获取文件

InputFile 是 Blazor 内置的文件选择组件，只能用于交互式渲染（InteractiveServer 或 InteractiveWebAssembly）。它不支持纯静态渲染（Static Server）。

• 在 .razor 文件中添加：<inputfile onchange="@OnFileSelected"></inputfile>
• OnChange 事件参数类型为 InputFileChangeEventArgs，通过 e.GetMultipleFiles() 获取单个或多个 IBrowserFile
• IBrowserFile 提供 Name、Size、ContentType，以及 OpenReadStream() 获取流（注意：流只可读一次，且有默认 10MB 限制）

客户端读取并上传到后端 API

典型做法是把文件流通过 HttpClient 发送到 ASP.NET Core Web API。

• 用 MultipartFormDataContent 封装文件流，设置正确的 Content-Disposition 头
• 示例：将 IBrowserFile 流复制进 StreamContent，再加入 multipart body
• 注意：Blazor WebAssembly 中 HttpClient 默认不支持直接传 Stream 到 multipart——需先读入 MemoryStream 或用 ByteArrayContent（适合小文件）；大文件建议分块或用 IBrowserFile.OpenReadStream() 配合自定义流包装
• 服务端 API 接收用 IFormFile（Controller）或 HttpRequest.Form.Files（Minimal API）

处理大文件与上传进度

原生 InputFile 不提供上传进度，需手动实现。

• 读取文件时用 IBrowserFile.OpenReadStream(maxAllowedSize) 控制内存占用
• 上传过程中，可用 Progress<t></t> + 自定义流包装器（如继承 Stream 并在 Read 时报告进度）来监听读取进度
• 若用 HttpClient.PostAsync()，.NET 6+ 支持 HttpContent 的 LoadIntoBufferAsync 或第三方库（如 Blazored.FileReader）简化进度跟踪
• 推荐轻量方案：用 Blazored.FileReader NuGet 包，它封装了带进度的读取和上传逻辑，兼容 Server 和 wasm

注意事项与避坑点

几个容易出错的地方要提前留意：

• InputFile 必须在启用交互性的组件中使用（@rendermode InteractiveServer 或项目已配置交互式渲染）
• WebAssembly 下不能直接访问本地文件系统，所有操作必须经用户主动选择（InputFile 是唯一合法入口）
• 默认单文件大小限制为 10MB，超限会抛异常；可在 OpenReadStream(maxSize: ...) 中设更高值，但需同步调整服务器端（如 Kestrel 的 MaxRequestBodySize、iis 的 maxAllowedContentLength）
• 上传中断或刷新页面会导致失败，如需断点续传，得自己实现分片上传逻辑（Blazor 本身不内置）

基本上就这些。用好 InputFile + HttpClient + 后端 IFormFile，再根据场景加进度或大文件优化，就能稳稳跑通 Blazor 文件上传。