大文件断点续传

最后更新于: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 合并分片文件,得到用户上传的文件。至此大文件上传就完成了。
';