Blazor Server通过JS Invoke传递大视频字节出现JSON过大报错如何解决？

你通过JS.InvokeAsync直接传递大体积字节数组时，Blazor会自动将字节数组编码为Base64字符串并封装到JSON payload中传输，ASP.NET Core默认的JSON序列化器限制单值最大长度为32MB，133MB的视频转Base64后体积会额外膨胀33%，远超阈值，因此触发报错。

方案1：使用DotNetStreamReference流式传输（推荐，适用于Blazor 6+） #

这是Blazor官方针对大文件JS互操作提供的原生方案，无需修改全局序列化配置，内存占用更低，传输效率更高。

C#侧代码调整 #

if (!string.IsNullOrEmpty(item.PathFile))
{
    byte[] result = GetFile(item.PathFile);
    if (result != null)
    {                            
        var stream = new MemoryStream(result);
        // 将字节流包装为Blazor专属的流引用，不会触发JSON全量序列化
        var streamRef = new DotNetStreamReference(stream, leaveOpen: false);
        var url = await Js.InvokeAsync<string>("videoUrl", streamRef);
        data.ImageString = url;
    }
}

JS侧代码调整 #

async function videoUrl(streamRef) {
    // 直接从流引用读取二进制数据
    const arrayBuffer = await streamRef.arrayBuffer();
    // 注意Blob的type仅需填写MIME类型，不需要加data:xxx前缀
    const file = new Blob([arrayBuffer], { type: 'video/mp4' });
    const fileURL = URL.createObjectURL(file);
    // 后续不用该地址时记得调用 URL.revokeObjectURL(fileURL) 释放内存
    return fileURL;
}

方案2：修改JSON序列化阈值（仅适合临时测试，不推荐生产使用） #

如果是低版本Blazor无法使用流式传输，可以临时放开JSON序列化的大小限制，在Program.cs中添加如下配置：

builder.Services.AddServerSideBlazor()
    .AddJsonOptions(options =>
    {
        // 放开单JSON值的最大长度限制
        options.JsonSerializerOptions.MaxJsonLength = int.MaxValue;
    });

注意：该方案传输大体积Base64字符串会占用极高内存，前端解码效率极低，容易导致页面卡顿。

方案3：后端提供临时视频访问端点（性能最优） #

完全跳过JS互操作传字节的逻辑，后端新增一个带权限校验的临时视频访问接口，直接将接口地址赋值给video标签的src属性即可，天然支持流式边加载边播放，无需等待全量文件传输完成。

你原有JS代码中Blob的type属性填写错误，data:video/mp4;base64是DataURL的格式，Blob的type参数仅需传入标准MIME类型video/mp4即可，避免后续出现视频解析异常。

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