在Blazor中处理用户上传的文件，核心是使用内置的InputFile组件。这个组件封装了浏览器端的文件选择逻辑，用户点击后会弹出文件选择框，选择完成后通过OnChange事件把文件信息传递给C#代码。无论你用的是Blazor Server还是Blazor WebAssembly，这一套事件处理方式是相同的，但后续文件流读取和保存策略会因托管模型不同而产生差异。
InputFile组件与IBrowserFile接口
<InputFile>组件在Razor页面中的声明很简单，可以设置multiple属性来允许一次选择多个文件。当用户完成选择后，组件会触发OnChange事件，事件参数是一个InputFileChangeEventArgs对象，其File属性返回单个文件，Files属性返回文件集合。如果未设置multiple，Files集合通常只有一个元素，可以直接用File属性获取。
每个文件都被描述为IBrowserFile接口实例，该接口提供了Name、Size、LastModified、ContentType等属性，还定义了OpenReadStream方法用于打开文件的只读流。需要注意的是，OpenReadStream方法有一个默认最大读取限制，超过这个大小会抛出异常，因此在处理大文件时必须显式传入较大的maxAllowedSize参数。此外，不要试图在OnChange事件之外异步读取文件流，因为浏览器文件引用可能会失效，最好在事件处理方法内完成流操作。
<InputFile OnChange="HandleFileSelected" multiple />
单文件与多文件上传实现
单文件上传的实现步骤相对直接。在HandleFileSelected方法中获取文件对象，然后调用OpenReadStream得到流，接着可以将流复制到MemoryStream、写入文件系统或直接传给后端API。如果目标是把文件保存到服务器磁盘，需要根据托管模型选择路径：Blazor Server可以直接使用System.IO命名空间写文件到服务器本地目录；Blazor WebAssembly则无法直接访问服务器文件系统，必须通过HTTP请求把文件流发送到后端API处理。
多文件上传只需要在组件上添加multiple属性，然后遍历InputFileChangeEventArgs.Files集合。每个文件都可以独立设置大小限制和校验逻辑。下面代码展示了一个完整的处理方法，包括限制单个文件不超过5MB、只允许图片扩展名，并将文件保存到指定目录。
private async Task HandleFileSelected(InputFileChangeEventArgs e)
{
const long maxFileSize = 5 * 1024 * 1024;
var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif" };
foreach (var file in e.Files)
{
var extension = Path.GetExtension(file.Name).ToLowerInvariant();
if (!allowedExtensions.Contains(extension))
{
// 记录日志或提示用户
continue;
}
if (file.Size > maxFileSize)
{
// 提示文件过大
continue;
}
// 构建保存路径，注意根据实际环境调整
var savePath = Path.Combine(@"C:\Uploads", file.Name);
await using var fileStream = file.OpenReadStream(maxAllowedSize: maxFileSize);
await using var fs = File.Create(savePath);
await fileStream.CopyToAsync(fs);
}
}
大文件上传与进度反馈
对于大文件，直接把整个文件读入内存会迅速消耗服务器或客户端资源，尤其是Blazor WebAssembly模式下，浏览器内存有限，几百兆的文件一次性读取很容易导致页面崩溃。更稳妥的做法是使用分块读取，每次从文件流中读取固定大小的缓冲区，逐步写入目标流，同时累计已读字节数并更新进度值。
Blazor Server模式下还存在一个额外限制：SignalR连接的消息大小默认有限制，如果文件流直接通过SignalR传输，可能会被截断或报错。因此，在Blazor Server中处理大文件时，建议不要通过SignalR把文件内容回传给客户端，而是直接在服务器端完成保存，或者将文件上传改为独立的HTTP请求。下面代码演示了分块复制并计算进度的逻辑。
private async Task UploadLargeFile(IBrowserFile file)
{
const int bufferSize = 81920; // 80KB
long totalBytesRead = 0;
long fileSize = file.Size;
await using var stream = file.OpenReadStream(maxAllowedSize: 10L * 1024 * 1024 * 1024);
await using var output = File.Create(Path.Combine(@"C:\Uploads", file.Name));
var buffer = new byte[bufferSize];
int bytesRead;
while ((bytesRead = await stream.ReadAsync(buffer, 0, buffer.Length)) > 0)
{
await output.WriteAsync(buffer, 0, bytesRead);
totalBytesRead += bytesRead;
var progress = (double)totalBytesRead / fileSize * 100;
// 这里可以更新UI进度条，例如调用StateHasChanged
}
}
两种托管模式下的差异与避坑
Blazor Server和Blazor WebAssembly在文件上传上的差异主要体现在文件流处理位置和资源消耗上。Blazor Server的C#代码运行在服务器端，文件流可以直接写入服务器磁盘，但需要注意SignalR的消息大小限制和并发上传对服务器内存的影响。Blazor WebAssembly的C#代码运行在浏览器中，文件流读取会占用浏览器内存，而且无法直接访问服务器磁盘，必须将文件内容通过HTTP请求发送到后端API。
另一个常见问题是文件类型校验容易被绕过。通过扩展名判断文件类型并不安全，攻击者可以修改扩展名上传伪装文件。更可靠的做法是检查文件内容的魔数，例如图片文件的前几个字节。此外，在上传完成后应及时释放文件流，避免句柄泄漏。如果使用异步方法，注意在合适的生命周期中调用StateHasChanged来刷新UI进度，避免界面卡顿。
最后还需要注意，<InputFile>组件在表单中使用时，如果页面有EditForm，记得不要忘记禁用默认的表单提交行为，否则选择文件后可能会触发页面刷新。可以通过在<InputFile>外层放置一个div并阻止点击冒泡，或者直接在事件方法中调用preventDefault的逻辑。总体来说，掌握流式读取和模式差异，就能在Blazor中稳定实现文件上传功能。
Blazor文件上传InputFile组件IBrowserFile修改时间：2026-09-20 15:45:53