Blazor WebAssembly如何预览大于500KB的上传图片？

问题根源 #

你当前的方案依赖OpenReadStream()读取整个文件到内存并转Base64，而Blazor的OpenReadStream()默认最大限制是512KB，同时Base64会让文件体积额外膨胀30%，大图片不仅触发限制错误，还会占用大量浏览器内存。

无需Base64/提前上传的解决方案 #

直接利用浏览器原生的URL.createObjectURL()API，它可以为本地文件生成一个临时的Blob URL，无需读取整个文件内容，完全在浏览器端处理，既不占用大量内存，也不会上传到服务器。

实现步骤 #

1. 在组件中添加必要字段：

private string? ImageSource;

2. 修改文件选择处理方法，调用浏览器API生成临时URL：

protected async Task HandleFileSelection(InputFileChangeEventArgs e)
{
    var file = e.GetMultipleFiles().FirstOrDefault();
    if (file != null)
    {
        // 调用浏览器原生API创建临时Blob URL
        ImageSource = await JS.InvokeAsync<string>("URL.createObjectURL", file);
    }
    StateHasChanged();
}

3. 添加资源释放逻辑（避免内存泄漏）：
   实现IAsyncDisposable接口，在组件销毁时释放临时URL：

public async ValueTask DisposeAsync()
{
    if (!string.IsNullOrEmpty(ImageSource))
    {
        await JS.InvokeVoidAsync("URL.revokeObjectURL", ImageSource);
    }
}

4. Razor页面中显示预览图：

@if (!string.IsNullOrEmpty(ImageSource))
{
    <img src="@ImageSource" alt="上传预览" style="max-width: 100%; max-height: 400px;" />
}
<InputFile OnChange="HandleFileSelection" accept="image/*" />

大型平台通用方案 #

1. 优先本地临时URL预览：和上述方案一致，用URL.createObjectURL()生成本地预览，大文件场景下比FileReader更节省内存。
2. 本地图片压缩：对几十MB级的超大图片，通过Canvas在本地进行缩放、降质处理，生成体积更小的缩略图用于预览，原文件保留用于后续上传。
3. 预览与上传解耦：预览完全在浏览器端完成，上传时直接处理原文件（或分片上传），彻底避免用户取消操作导致的无效存储。

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