大文件分片上传和断点续传

一、功能拆解

（一）前端（web-admin）

• 产品添加界面支持选择大图片文件，实现分片上传 、断点续传 。
• 实时展示上传进度 ，上传完成后图片可正常回显 。

（二）后端（web-server）

• 提供分片上传接口，支持接收分片 、合并分片 、校验已上传分片 。
• 实现断点续传（前端可查询已上传分片，避免重复上传） 。
• 图片合并后，支持访问与回显 。

二、详细实现步骤

（一）前端实现

1. 切片处理：选择图片后，按固定大小（如 2MB）对文件进行切片拆分。
2. 断点续传校验 ：上传前请求后端，获取已上传分片列表，跳过重复分片。
3. 分片上传 ：逐个上传分片，支持失败重传（捕获上传异常，重试未成功分片 ）。
4. 合并通知 ：所有分片上传完成后，调用后端接口触发分片合并 。
5. 回显处理：合并成功后，获取图片 URL 并渲染回显。

（二）后端实现

1. 分片上传接口（POST /upload/chunk） ：接收分片文件，按规则（hash_index）保存到临时目录 （如 public/tmpuploads/ ）。
2. 已上传分片查询接口（GET /upload/chunk?hash=xxx） ：根据文件 hash，返回已存在的分片 index 列表 。
3. 分片合并接口（POST /upload/merge） ：校验所有分片完整性，按序合并为完整图片，保存到最终目录 （如 public/productuploads/ ），返回可访问的图片 URL 。
4. 静态资源访问 ：通过 GET /upload/file/:filename 提供合并后图片的访问能力。

三、接口设计建议

接口类型	路径	功能说明	关键参数/返回值
POST	/upload/chunk	上传单个分片	参数：hash（文件标识）、index（分片序号）、file（分片内容）；返回上传状态
GET	/upload/chunk?hash=xxx	查询已上传分片	参数：hash（文件标识）；返回已上传 index 列表
POST	/upload/merge	合并分片生成完整图片	参数：hash（文件标识）、totalChunks（总分片数）；返回图片访问 URL
GET	/upload/file/:filename	访问合并后的图片	参数：filename（图片文件名）；返回图片文件内容

四、前端分片上传核心流程

1. 文件标识计算 ：使用 spark-md5 等库计算文件 hash，作为文件唯一标识。
2. 切片与上传准备 ：按固定大小切片，记录每个分片的 index。
3. 断点续传校验 ：调用 GET /upload/chunk?hash=xxx，获取已上传分片 index，跳过重复分片。
4. 分片上传循环 ：遍历未上传分片，调用 POST /upload/chunk 上传，实时更新进度。
5. 合并触发 ：所有分片上传完成后，调用 POST /upload/merge 合并分片。
6. 回显处理：拿到合并后的图片 URL，渲染到页面完成回显。

五、后端分片处理核心流程

1. 分片存储 ：收到分片后，按 hash_index 规则（如 public/tmpuploads/${hash}_${index} ）保存到临时目录。
2. 查询逻辑 ：根据 hash 遍历临时目录，收集已存在的 index 并返回。
3. 合并逻辑 ：
   • 校验所有分片是否完整（totalChunks 与实际分片数匹配 ）。
   • 按 index 顺序读取分片内容，写入最终文件（如 public/productuploads/${hash}.png ）。
   • 返回合并后文件的访问 URL（如 /upload/file/${hash}.png ）。
4. 清理逻辑（可选）：合并完成后，删除临时分片文件，释放存储。

通过以上方案，可实现大图片的高效分片上传、断点续传及回显，适配前后端协作流程，保障上传稳定性与用户体验。