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

一、功能拆解

(一)前端(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. 清理逻辑(可选):合并完成后,删除临时分片文件,释放存储。

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

相关推荐
像风一样自由202034 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
袁煦丞3 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码3 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github