一、功能拆解
(一)前端(web-admin)
- 产品添加界面支持选择大图片文件,实现分片上传 、断点续传 。
- 实时展示上传进度 ,上传完成后图片可正常回显 。
(二)后端(web-server)
- 提供分片上传接口,支持接收分片 、合并分片 、校验已上传分片 。
- 实现断点续传(前端可查询已上传分片,避免重复上传) 。
- 图片合并后,支持访问与回显 。
二、详细实现步骤
(一)前端实现
- 切片处理:选择图片后,按固定大小(如 2MB)对文件进行切片拆分。
- 断点续传校验 :上传前请求后端,获取已上传分片列表,跳过重复分片。
- 分片上传 :逐个上传分片,支持失败重传(捕获上传异常,重试未成功分片 )。
- 合并通知 :所有分片上传完成后,调用后端接口触发分片合并 。
- 回显处理:合并成功后,获取图片 URL 并渲染回显。
(二)后端实现
- 分片上传接口(
POST /upload/chunk
) :接收分片文件,按规则(hash_index
)保存到临时目录 (如public/tmpuploads/
)。 - 已上传分片查询接口(
GET /upload/chunk?hash=xxx
) :根据文件hash
,返回已存在的分片 index 列表 。 - 分片合并接口(
POST /upload/merge
) :校验所有分片完整性,按序合并为完整图片,保存到最终目录 (如public/productuploads/
),返回可访问的图片 URL 。 - 静态资源访问 :通过
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 (图片文件名);返回图片文件内容 |
四、前端分片上传核心流程
- 文件标识计算 :使用
spark-md5
等库计算文件hash
,作为文件唯一标识。 - 切片与上传准备 :按固定大小切片,记录每个分片的
index
。 - 断点续传校验 :调用
GET /upload/chunk?hash=xxx
,获取已上传分片index
,跳过重复分片。 - 分片上传循环 :遍历未上传分片,调用
POST /upload/chunk
上传,实时更新进度。 - 合并触发 :所有分片上传完成后,调用
POST /upload/merge
合并分片。 - 回显处理:拿到合并后的图片 URL,渲染到页面完成回显。
五、后端分片处理核心流程
- 分片存储 :收到分片后,按
hash_index
规则(如public/tmpuploads/${hash}_${index}
)保存到临时目录。 - 查询逻辑 :根据
hash
遍历临时目录,收集已存在的index
并返回。 - 合并逻辑 :
- 校验所有分片是否完整(
totalChunks
与实际分片数匹配 )。 - 按
index
顺序读取分片内容,写入最终文件(如public/productuploads/${hash}.png
)。 - 返回合并后文件的访问 URL(如
/upload/file/${hash}.png
)。
- 校验所有分片是否完整(
- 清理逻辑(可选):合并完成后,删除临时分片文件,释放存储。
通过以上方案,可实现大图片的高效分片上传、断点续传及回显,适配前后端协作流程,保障上传稳定性与用户体验。