大文件断点续传
最后更新于:2022-04-02 03:24:33
[TOC]
> [参考](https://segmentfault.com/a/1190000022624799?utm_source=tuicool&utm_medium=referral)
## demo
```
git clone https://github.com/jiaozitang/fileUploadDemo
cd fileUploadDemo
mkdir -p nodeServer/uploads
```
## 方案
### 文件md5
通过 [spark-md5](https://www.npmjs.com/package/spark-md5) 获取文件md5
### 查询文件状态
- 前端得到文件的 MD5 后,从后台查询是否存在名称为 MD5 的文件夹
- 如果存在,列出文件夹下所有文件,得到已上传的切片列表
- 如果不存在,则已上传的切片列表为空。
### 文件分片
- File 对象也有 slice 方法。
定义每一个分片文件的大小变量为 chunkSize,通过文件大小 FileSize 和分片大小 chunkSize 得到分片数量 chunks,使用 for 循环和 file.slice() 方法对文件进行分片,序号为 0 - n,和已上传的切片列表做比对,得到所有未上传的分片,push 到请求列表 requestList。
### 上传分片
调用 Promise.all 并发上传所有的切片,将切片序号、切片文件、文件 MD5 传给后台。
后台接收到上传请求后,首先查看名称为文件 MD5 的文件夹是否存在,不存在则创建文件夹,然后通过 fs-extra 的 rename 方法,将切片从临时路径移动切片文件夹中
### 上传进度
原生 Javascript 的 XMLHttpRequest 有提供 progress 事件,这个事件会返回文件已上传的大小和总大小。项目使用[**axios**](https://www.kancloud.cn/yunye/axios/234845)对 ajax 进行封装,可以在 config 中增加`onUploadProgress`方法,监听文件上传进度。
### 合并分片
上传完所有文件分片后,前端主动通知服务端进行合并
在合并文件夹里的分片文件前,根据文件名进行排序,然后再通过 concat-files 合并分片文件,得到用户上传的文件。至此大文件上传就完成了。
';