Blazor Server大文件上传进度显示实现方案咨询

核心思路 #

Blazor Server 默认的 InputFile 组件和 CopyToAsync 方法没有内置进度回调，要实现进度显示，需要手动处理文件流的读取与写入，并跟踪已上传字节数，再通过Blazor的状态更新机制同步到UI。

具体实现步骤 #

1. 前端UI准备

在Razor组件中添加进度显示元素，绑定进度值：

<InputFile OnChange="HandleFileSelected" />
@if (showProgress)
{
    <div>
        <progress value="@uploadProgress" max="100"></progress>
        <p>已上传: @uploadProgress%</p>
    </div>
}

2. 后端逻辑改造（替换原有CopyToAsync）

不要直接用CopyToAsync，而是手动读取文件流的字节块，每写入一部分就计算进度并更新UI：

private int uploadProgress;
private bool showProgress;
private IWebHostEnvironment env; // 通过构造函数注入

// 构造函数注入IWebHostEnvironment
public YourComponent(IWebHostEnvironment env)
{
    this.env = env;
}

private async Task HandleFileSelected(InputFileChangeEventArgs e)
{
    var file = e.File;
    string safeFileName = WebUtility.HtmlEncode(file.Name);
    var path = Path.Combine(env.ContentRootPath, "files", safeFileName);
    var totalBytes = file.Size;
    long bytesWritten = 0;
    const int bufferSize = 81920; // 80KB缓冲区，可按需调整
    byte[] buffer = new byte[bufferSize];

    showProgress = true;
    uploadProgress = 0;

    await using FileStream fs = new(path, FileMode.Create);
    await using var fileStream = file.OpenReadStream(maxFileSize: 1024 * 1024 * 100); // 限制最大上传100MB，可调整

    int bytesRead;
    while ((bytesRead = await fileStream.ReadAsync(buffer, 0, buffer.Length)) > 0)
    {
        await fs.WriteAsync(buffer, 0, bytesRead);
        bytesWritten += bytesRead;
        // 计算进度并节流更新，避免频繁推送状态
        int newProgress = (int)((double)bytesWritten / totalBytes * 100);
        if (newProgress != uploadProgress)
        {
            uploadProgress = newProgress;
            StateHasChanged();
            await Task.Delay(50); // 短暂延迟，降低SignalR通信压力
        }
    }

    showProgress = false;
    StateHasChanged();
}

3. 优化建议

• 节流更新：避免每次写入都触发状态更新，可按上传百分比（比如每1%）或时间间隔（每50ms）更新，减少SignalR通信开销。
• 错误处理：添加try-catch块，处理上传中断、文件写入失败等异常，及时重置进度状态并提示用户。
• 大文件分片：如果文件超过1GB，建议拆分成分片上传，降低单次请求的资源占用，同时进度跟踪更精准。

内容的提问来源于stack exchange，提问作者Lash