大文件上传需要实现的基本需求:
- 支持拆分上传请求(即切片)
- 支持断点续传
1. 文件切片
在JavaScript中,文件File对象是Blob对象的子类,Blob对象包含一个重要的方法slice,通过这个方法,我们就可以对文件进行拆分。可以在每个切片请求上传递一个相同文件的context参数标识切片来自同一个个文件。为了确认每个切片的顺序,按序拼接切片,还原文件,可以为每个切片上设置一个位置索引值。
2. 断点续传
断点续传指的是:可以从已经上传部分开始继续上传未完成的部分,而没有必要从头开始上传,节省上传时间。
核心问题就是如何保存已上传切片的信息:
方式一:前端做处理,前端通过locaStorage等方式存储已上传切片的信息,在上传切片以前,判断是否已上传,如果没有则进行上传,然后将成功上传的切片信息存储起来,如果有,不进行上传。【实现起来比较方便,缺点在于如果用户清除了本地文件,会导致上传记录丢失】
方式二:后端做处理,服务端本身知道哪些切片已经上传,因此可以由服务端额外提供一个根据文件context查询已上传切片的接口,前端在上传切片时先调用这个接口进行查询。