Vue无法直传GridFS，必须经后端中转；因浏览器无法构造合法BSON chunk数据，fetch()直传/fs/chunks必失败；前端需自行管理fileId、chunkIndex、上传状态，并在最后调用/api/upload/complete完成写入。
不能直接流式上传，必须经后端中转。所谓“Vue直传GridFS”是常见误解，前端无法绕过服务端向 fs.chunks 或 /fs/chunks 发送合法 chunk 数据 —— MongoDB 驱动层不暴露该集合的写入接口，HTTP 层也无对应路由，强行 POST 会返回 405 Method Not Allowed 或 401 Unauthorized。
为什么 fetch() + /fs/chunks 必然失败
GridFS 的 chunk 文档有强约束：必须含正确 _id（ObjectId 类型）、files_id（关联 fs.files）、n（序号）、data 字段为 BinData 类型。浏览器 JS 无法安全构造 BSON 结构，fetch() 发送的 JSON 或 FormData 会被驱动拒绝，常见报错包括：insert document must contain an _id field、files_id is missing、插入后 mongofiles list 查不到文件 —— 全因跳过了 GridFSBucket.openUploadStreamWithId 的校验与组装逻辑。
前端分片上传必须自己管理的三个状态点
后端不保存上传上下文，所有断点续传逻辑需 Vue 自行维护：
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 每片上传前生成唯一
fileId（推荐调用后端/api/upload/init接口返回new ObjectId()），所有分片共用同一个，否则后端无法合并 - 每片响应必须返回服务端记录的
chunkIndex，前端据此去重；重复提交同一索引会导致数据错乱 - 网络中断后，必须先
GET /api/upload/status?fileId=xxx获取已成功上传的chunkIndex数组，再从Math.max(...uploaded) + 1继续上传
切片大小和元数据怎么设才不出错
Node.js 后端默认 stream 的 highWaterMark 是 64KB，若前端切片过大（如 10MB），可能触发内存溢出或写入卡顿；过小（如 64KB）则 HTTP 请求过多，拖慢整体速度。实测稳定值为：
- 切片大小固定为
5 * 1024 * 1024（5MB），避开 Node.js 流水线瓶颈 - 每片
POST至自定义接口（如/api/upload/chunk），携带必要字段：fileId（字符串）、chunkIndex（数字）、totalChunks（总数）、filename（原始名） - 禁用前端计算
md5或sha256校验 ——Blob.slice()在部分安卓 WebView 下会改变二进制内容，导致校验必然失败
真正关键的不是“怎么发”，而是“发给谁”和“发完怎么收尾”。最后一片上传成功后，必须显式 POST /api/upload/complete?fileId=xxx，让后端调用 bucket.close() 并写入 fs.files。漏掉这步，文件永远处于“未完成”状态，openDownloadStreamById 会抛错或返回空流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
