如何使用断点续传上传大文件

Posted 2023-03-04 曾胖神父

概念

大文件上传的需求介绍

不管怎样简单的需求，在量级达到一定层次时，都会变得异常复杂。
文件上传简单，文件变大就复杂
上传大文件时，以下几个变量会影响我们的用户体验

• 服务器处理数据的能力
• 请求超时
• 网络波动
  上传时间会变长，高频次文件上传失败，失败后又需要重新上传等等，为了解决上述问题，我们需要对大文件上传单独处理，这里涉及到分片上传及断点续传两个概念。

分片上传

分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分割成多个数据块（Part）来进行分片上传
如下图
一般实现方式有两种：

• 服务器端返回，告知从哪开始
• 浏览器端自行处理
  上传完之后再由服务端对所有上传的文件进行汇总整合成原始文件
  大致流程如下：
  1，将需要上传的文件按照一定的分割规则，分割成相同大小的数据块。
  2，初始化一个分片上传任务，返回本次分片上传唯一标识。
  3，按照一定的策略(串行或并行)发送各个分片数据块。
  4，发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件

断点续传

断点续传指的是在下载或上传时，将下载或上传任务人为的划分为几个部分(分片)
每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传下载未完成的部分，而没有必要从头开始上传下载。从而让用户节省时间，提高速度。
一般实现方式有两种：

• 服务器端返回，告知从哪开始
• 浏览器端自行处理

上传过程中将文件在服务器写为临时文件，等全部写完了（文件上传完），将此临时文件重命名为正式文件即可

如果中途上传中断过，下次上传的时候根据当前临时文件大小，作为在客户端读取文件的偏移量，从此位置继续读取文件数据块，上传到服务器从此偏移量继续写入文件即可

实现思路

获取文件之后,保存文件唯一性标识,使用Blob.slice切割文件，分段上传，每次上传一段，根据唯一标识判断文件上传进度，直到文件的全部片段上传完毕
具体如下图

总结

在获取文件之后，使用Blob.slice方法将大文件切割成多个切片，并将文件唯一标识(一般指的md5)与切片下标组合成切片的hash,从而让上传切片的时候不仅能保证每个切片的唯一性还可以保证后端能够识别切片顺序，然后借助http的可并发性，同时上传多个切片，这样从原本传一个大文件，变成了同时传多个小的文件切片，从而大大减少上传时间。并且为了保证上传的可连续性，可以让服务端保存已上传的切片hash，前端每次上传前向服务端获取已上传的切片hash，通过切片hash获取上传进度，从而实现断点续传功能，进而避免了重复上传。