Blazor Server .NET 6：将浏览器本地Blob转换为Base64字符串

问题根源 #

服务器端的HttpClient.GetStreamAsync无法读取浏览器本地的Blob URL——Blob URL是浏览器会话内的临时资源标识，仅在客户端有效，服务器无法直接访问浏览器本地存储的Blob资源，因此会抛出异常。

高效解决方案：通过JS互操作在客户端处理 #

Blob是客户端资源，最优处理方式是在浏览器端直接将其转为Base64，再传递给Blazor Server的服务器端代码。

1. 编写客户端JavaScript工具函数

在wwwroot/js/目录下创建blobUtils.js文件，添加以下代码：

window.blobToBase64 = async (blobUrl) => {
    const response = await fetch(blobUrl);
    const blob = await response.blob();
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result.split(',')[1]); // 剔除Base64前缀
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
};

2. 在Blazor中引入并调用JS函数

首先在_Host.cshtml中引入上述JS文件：

<script src="~/js/blobUtils.js"></script>

然后在Blazor组件中注入IJSRuntime，调用转换函数：

@inject IJSRuntime JSRuntime

@code {
    private async Task<string> ConvertBlobToBase64(string blobUrl)
    {
        try
        {
            return await JSRuntime.InvokeAsync<string>("blobToBase64", blobUrl);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Blob转Base64失败: {ex.Message}");
            return null;
        }
    }

    // 示例调用逻辑
    private async Task HandleBlobConversion()
    {
        string targetBlobUrl = "blob:https://localhost:7066/94065f17-5b19-47e4-9256-59f3e237a662";
        string base64Result = await ConvertBlobToBase64(targetBlobUrl);
        
        if (!string.IsNullOrEmpty(base64Result))
        {
            // 此处添加Base64字符串的后续业务逻辑（如存储、上传等）
        }
    }
}

优化建议 #

• 提前转换：如果Blob是由前端上传文件生成的，建议在上传阶段直接用FileReader将文件转为Base64，避免先生成Blob再二次转换的额外开销。
• 大文件处理：针对大图片，Base64会使数据体积膨胀约30%，此时建议直接传递文件流而非Base64，减少带宽和内存消耗。

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