大文件上传总结 ​

背景（S） ​

当上传一个 2GB 大小的视频文件的时候，如果直接使用 axios.post 上传，那么中途一旦出现网络卡顿，就需要重新上传这个视频文件，这就会对用户的体验造成不好的影响，有没有更好的办法解决呢？

任务（T） ​

在这种数据量极大的场景下，我们需要采用断点续传的解决方案。前端文件切片，异步上传切片文件，服务端接收临时切片文件，当最后一个切片文件上传完成后，合并所有的临时文件生成最终文件。

行动（A） ​

前端

1. 获取文件的hash（注意：在Web Worker线程中生成hash）
2. 根据当前文件hash判断文件是否上传过
   • 上传过则直接返回文件url
   • 反之则继续分片上传
3. 初始化分片上传，获取文件的uploadId
4. 通过uploadId获取已上传的分片
5. 剔除掉已上传的分片数据，生成上传异步队列
6. 异步队列分片上传（注意：Chorme浏览器限制同一域名同时最多6个HTTP链接）
7. 完成分片上传
8. 获取文件地址

后端

1. 把上传的分片数据按命名规范写入.tem临时文件
2. 读取.tmp临时分片文件数据，写入最终文件
3. 所有分片文件上传完毕，删除.tmp临时分片文件

结果（R） ​

• 结果：解决了在大文件上传过程中产生的一些不好的用户体验。
• 数据：优化了大文件上传的技术，减少了服务端的流量和压力，相同文件二次上传可以实现大文件秒传。
• 技术：从可复用性的角度来说，可以把前后端技术封装起来，对外提供服务，以后有大文件上传需求的地方都可用。
• 成长：掌握了大文件上传的技术实现，以及在实现过程中应该注意的细节点。