React+Antd大文件划片上传与断点续传

6,146 阅读1分钟

选择文件后,前端进行预处理划片

预处理后的对象如下图,发送至后端接口查询(用fileMd5查询文件是否上传,chunks下的chunkMd5判断分片是否上传)

后端接口返回数据

如果未上传,返回json数据为

  • 拿到返回值时,通过Message判断是否已上传过该文件,uploaded/total判断是否已上传完成
  • 前端过滤出status为pending的分片,组成新数组uploadList
  • 创建FormData对象,将fileMd5、当前chunk、fileName、chunkSize加入
  • 调用分片文件上传接口,分片上传成功时,chunk+1,传输至最后一片时,上传结束。