<p>Blazor WebAssembly 中需通过 JS 互操作监听拖放事件，关键是在 ondragover/dragenter 中调用 preventDefault()，JS 序列化文件元数据传回 C# 构造轻量 IBrowserFile，再流式分块上传并禁用拖放区域防重复触发。</p>
Blazor WebAssembly 中如何监听文件拖放事件
Blazor Server 和 WebAssembly 原生不提供 ondragover、ondrop 等 DOM 事件的 C# 绑定，必须通过 JS 互操作桥接。直接在组件里写 @ondrop 不会触发——它会被忽略，因为 Blazor 没注册对应事件处理器。
正确做法是用 JSRuntime 注册原生事件监听器，并把文件列表传回 C#。关键点在于：必须在 ondragover 中调用 event.preventDefault()，否则浏览器会走默认行为（比如打开文件），导致 drop 事件根本不会触发。
实操建议：
- 在
OnAfterRenderAsync或OnInitializedAsync中调用 JS 函数初始化监听（避免重复绑定） - JS 端监听
drop后，用Array.from(e.dataTransfer.files)转为数组再序列化，否则传到 C# 会是空对象 - 务必在 JS 中对
dragenter和dragover都调用preventDefault()，仅dragover不够稳定
如何把拖入的 FileList 安全转成 IBrowserFile
Blazor 的 InputFile 组件返回的是 IBrowserFile，但 JS 传来的原始 File 对象不是。不能直接强制转换，也不能用 MemoryStream 读取 JS 端未暴露的 blob 数据——那会失败。
必须通过 IJSRuntime.InvokeAsync<IBrowserFile> 让 JS 创建一个包装对象，或更稳妥地：用 JS 把文件切片后以 Uint8Array 形式传回，C# 端重建 IBrowserFile 实现（如自定义 BrowserFileStream）。但生产环境推荐走标准路径：
- JS 端调用
DotNet.invokeMethodAsync("AssemblyName", "ReceiveFiles", fileArray)，其中fileArray是包含name、size、type、lastModified的纯对象数组 - C# 端用这些元数据构造轻量
IBrowserFile实现类（实现Name、Size、ContentType、LastModified），再用OpenReadStream()在 JS 中按需拉取二进制流 - 别试图一次性把大文件全读进内存——
OpenReadStream()应配合stream.ReadAsync()分块上传
拖放上传时如何避免内存爆满和 UI 卡死
用户一次拖入 10 个 500MB 文件，若直接调用 file.OpenReadStream().ToArrayAsync()，会瞬间申请 5GB 内存，WebAssembly 堆直接崩溃，页面白屏。
真正可行的上传策略是「流式分块 + 进度反馈」：
- 每个
IBrowserFile调用OpenReadStream(64 * 1024)指定缓冲区大小，防止默认 1MB 缓冲吃光内存 - 用
HttpClient.PostAsync()配合MultipartFormDataContent，逐块Add()流而非整个文件 - 上传中用
Progress<HttpContentProgress>监听进度，但注意：Blazor Server 下该回调在服务器线程，需用InvokeAsync更新 UI；WebAssembly 下可直接更新 - 禁用拖放区域 during upload，防止用户重复触发——用
@if (!isUploading) { ... }控制渲染，别只靠 CSSpointer-events: none
服务端接收时为什么 IFormFile 总是 null
常见错误是前端用 MultipartFormDataContent 构造请求，但后端没配好模型绑定。ASP.NET Core 默认只接受 multipart/form-data 中字段名为 files 的项，且要求 key 匹配。
例如前端这样发：
var content = new MultipartFormDataContent(); content.Add(streamContent, "upload", file.Name); // ← 错！key 是 "upload"
后端必须写成：
[HttpPost("upload")]
public async Task<IActionResult> Upload([FromForm] IFormFile upload) // ← key 必须叫 "upload"
更通用的做法是传数组：
- 前端用
content.Add(streamContent, "files", file.Name)（多个文件都用"files"作为 key） - 后端接收为
IFormFileCollection files，而不是单个IFormFile - 检查
Request.ContentLength是否远大于实际文件总大小——可能 JS 传了冗余字段，导致服务端解析 multipart 失败而静默丢弃
跨域场景下，别忘了服务端 Startup.cs 或 Program.cs 中启用 AllowAnyHeader() 和 AllowCredentials()，否则预检请求（OPTIONS）会失败，拖放上传直接无响应。
