vue实现大文件切片断点续传

一、前言

说起上传文件，基本上用了input框就可以解决。

直到这天，后端找到我说，这个100g的视频，看看怎么样才能上传。

100g，我看了看飘红的c盘（剩余空间7.86g），好家伙，我c盘都放不下100g，你现在要我通过网页上传。

没法子，只好开干了。

二、整体思路

这么大文件，一次性上传明显不现实，因为每次一断网，那就会从头开始上传，体验感极差。所以切片势在必行，关键就是如何切，怎么保障文件数据不会丢失，同时优化上传保障机制。

1、切片

不管是input还是el-upload组件，本质上拿到的文件都是blob文件格式，blob文件自带一个slice方法，可以用来分割切片。

//一个新的 [`Blob`] 对象，它包含了原始 [`Blob`]对象的某一个段的数据
// slice接受三个参数start、end、和contentType（可选）
// start和end的距离差就是切片的文件大小，以字节为单位
const chunk = file.slice(start, end);
const blob = new Blob([chunk], { type: file.type })

这里的blob就是每一个切片了，相当于每一个个小文件。

2、计算切片唯一码：md5或者hash值

js-md5  计算切片md5
spark-md5.min.js   计算hash值

如果不大的话，选用js-md5即可，如果文件巨大，那可能会引起阻塞，导致页面假死，所以可以选用spark-md5.min.js，来计算hash值，它使用 web-worker 在 worker 线程计算 hash，这样用户仍可以在主界面正常的交互。根据实际情况选择即可，但记得提前跟后端沟通。

具体计算方法网上很多，就不赘述了。

计算完后，将每一个切片和对应的唯一码关联起来，待下一步使用。

3、切片上传

按小文件的形式，普通地上传每一片。

同时需要将切片数和第二点的唯一码，也附上，给到后端进行文件检验。

根据校验成功与否，对应返回唯一码和状态，前端标记已完成和未完成的切片，

可以对失败或者未完成的切片进行重传操作。

如果有并行上传需求，那可以使用Promise.race()进行并发请求，用Promise.all()来获取最终完成情况。

但这也需要考虑并行数量对性能的影响。

4、上传前检测切片是否存在于后端

有时候因为网络等问题，可能会导致上传过程中途失败等等原因，再次上传就是重头开始了。

这就会造成一种浪费吧，明明该切片在服务器上已经有了，有覆盖还行，没有覆盖的话，那对最终的合并肯定是会造成影响的。

所以在上传前，可先提前发起请求，询问切片是否存在。

存在则秒传完成，不存在则继续上传，走第3点。

5、发送合并请求

在全部上传完之后，同时全部都是成功的情况下，前端主动发送合并请求，携带未

切片前源文件的md5或者hash值，后端接到请求合并切片，在同路径下，重现文件，并对比

md5码或者hash值，一致则返回成功。

三、小结

本文基本上只是叙述了整体思路，思路理顺了，剩下的只是在对应的位置写入具体的业务逻辑即可。

到此这篇关于vue实现大文件切片断点续传的文章就介绍到这了,更多相关vue大文件断点续传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论