Blazor中JSInterop与Dropzone.js传递文件数据的优化方案问询

直接传递Base64字符串触发连接丢失的核心原因是：Base64编码后的数据体积比原始二进制大33%，大文件的Base64字符串会超出Blazor SignalR默认的消息大小限制（默认32KB），导致连接中断。更优的方案是直接传递ArrayBuffer格式的二进制数据，Blazor JSInterop原生支持ArrayBuffer与.NET byte[]的双向转换，效率更高且避免长度限制问题。

步骤1：修改JavaScript端的Dropzone事件处理 #

不再提取Base64的dataUrl，而是直接读取文件或缩略图的二进制ArrayBuffer，传递给Blazor组件：

let dropzoneInstance;

// 初始化Dropzone并绑定组件引用
function initDropzone(componentRef) {
  dropzoneInstance = new Dropzone("#myDropzone", {
    init: function() {
      // 缩略图创建事件：从dataUrl还原二进制数据
      this.on("thumbnail", function(file, dataUrl) {
        fetch(dataUrl)
          .then(res => res.arrayBuffer())
          .then(buffer => {
            componentRef.invokeMethodAsync('HandleThumbnailData', buffer, file.name);
          });
      });

      // 文件上传完成事件：直接读取原文件的ArrayBuffer
      this.on("complete", function(file) {
        file.arrayBuffer().then(buffer => {
          componentRef.invokeMethodAsync('HandleCompleteFileData', buffer, file.name, file.size);
        });
      });
    }
  });
}

// 销毁Dropzone实例（组件销毁时调用）
function destroyDropzone() {
  if (dropzoneInstance) dropzoneInstance.destroy();
}

步骤2：Blazor组件端接收二进制数据 #

通过DotNetObjectReference传递组件实例，用[JSInvokable]标记可被JS调用的方法，直接接收byte[]类型的二进制数据：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<div id="myDropzone" class="dropzone"></div>

@code {
    private DotNetObjectReference<YourComponent>? _componentRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _componentRef = DotNetObjectReference.Create(this);
            await JSRuntime.InvokeVoidAsync("initDropzone", _componentRef);
        }
    }

    [JSInvokable]
    public async Task HandleThumbnailData(byte[] thumbnailData, string fileName)
    {
        // 处理缩略图二进制数据，例如保存到内存、生成预览或上传到服务器
        Console.WriteLine($"缩略图接收完成：{fileName}，大小：{thumbnailData.Length}字节");
    }

    [JSInvokable]
    public async Task HandleCompleteFileData(byte[] fileData, string fileName, long fileSize)
    {
        // 处理完整文件数据，例如直接通过HttpClient上传到后端API
        Console.WriteLine($"文件接收完成：{fileName}，大小：{fileSize}字节");
        // await HttpClient.PostAsync("/api/files/upload", new ByteArrayContent(fileData));
    }

    public async ValueTask DisposeAsync()
    {
        _componentRef?.Dispose();
        await JSRuntime.InvokeVoidAsync("destroyDropzone");
    }
}

步骤3：（可选）调整SignalR消息大小限制 #

如果处理大文件（超过32KB），需要在Program.cs中增大SignalR的最大接收消息大小：

builder.Services.AddSignalR(options =>
{
    // 设置为10MB，可根据实际需求调整
    options.MaximumReceiveMessageSize = 10 * 1024 * 1024;
});

为什么这个方案更好 #

1. 体积更小：直接传递二进制数据，比Base64减少33%的传输体积
2. 效率更高：无需编码解码，JS的ArrayBuffer直接映射为.NET的byte[]，性能损耗低
3. 避免连接中断：不会因为超长字符串触发SignalR的消息大小限制

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