2. 查询文件状态
前端得到文件的 MD5 后，从后台查询是否存在名称为 MD5 的文件夹，如果存在，列出文件夹下所有文件，得到已上传的切片列表，如果不存在，则已上传的切片列表为空。
3. 文件分片
文件上传优化的核心就是文件分片，Blob 对象中的 slice 方法可以对文件进行切割，File 对象是继承 Blob 对象的，因此 File 对象也有 slice 方法。
定义每一个分片文件的大小变量为 chunkSize，通过文件大小 FileSize 和分片大小 chunkSize 得到分片数量 chunks，使用 for 循环和 file.slice() 方法对文件进行分片，序号为 0 - n，和已上传的切片列表做比对，得到所有未上传的分片，push 到请求列表 requestList。
4. 上传分片
调用 Promise.all 并发上传所有的切片，将切片序号、切片文件、文件 MD5 传给后台。
后台接收到上传请求后，首先查看名称为文件 MD5 的文件夹是否存在，不存在则创建文件夹，然后通过 fs-extra 的 rename 方法，将切片从临时路径移动切片文件夹中，结果如下：
当全部分片上传成功，通知服务端进行合并，当有一个分片上传失败时，提示“上传失败”。在重新上传时，通过文件 MD5 得到文件的上传状态，当服务器已经有该 MD5 对应的切片时，代表该切片已经上传过，无需再次上传，当服务器找不到该 MD5 对应的切片时，代表该切片需要上传，用户只需上传这部分切片，就可以完整上传整个文件，这就是文件的断点续传。
5. 上传进度
虽然分片批量上传比大文件单次上传会快很多，也还是有一段加载时间，这时应该加上上传进度的提示，实时显示文件上传进度。
原生 Javascript 的 XMLHttpRequest 有提供 progress 事件，这个事件会返回文件已上传的大小和总大小。项目使用 axios 对 ajax 进行封装，可以在 config 中增加 onUploadProgress 方法，监听文件上传进度。
6. 合并分片
上传完所有文件分片后，前端主动通知服务端进行合并，服务端接受到这个请求时主动合并切片，通过文件 MD5 在服务器的文件上传路径中找到同名文件夹。从上文可知，文件分片是按照分片序号命名的，而分片上传接口是异步的，无法保证服务器接收到的切片是按照请求顺序拼接。所以应该在合并文件夹里的分片文件前，根据文件名进行排序，然后再通过 concat-files 合并分片文件，得到用户上传的文件。至此大文件上传就完成了。
Node 端代码：
总结
本文讲述了大规格文件上传优化的一些做法，总结为以下 4 点：
ob.slice 将文件切片，并发上传多个切片，所有切片上传后告知服务器合并，实现大文件分片上传； 原生 XMLHttpRequest 的 onprogress 对切片上传进度的监听，实时获取文件上传进度； spark-md5 根据文件内容算出文件 MD5，得到文件唯一标识，与文件上传状态绑定； 分片上传前通过文件 MD5 查询已上传切片列表，上传时只上传未上传过的切片，实现断点续传。参照 Demo 源码 可快速上手上述功能
到此这篇关于大规格文件的上传优化思路详解的文章就介绍到这了,更多相关大文件上传优化内容请搜索七叶笔记以前的文章或继续浏览下面的相关文章希望大家以后多多支持七叶笔记！
