大文件分片上传、断点续传、秒传【Vue3 + Express 】

222 阅读2分钟

前言:

在我们日常开发中,上传技术是很常见的,但是当我们需要进行大文件上传的时候,可能会遇到一些问题:

1.上传时间比较久

2.中间一旦出错就需要重新上传

3.一般服务器端会对文件的大小进行限制

这时候,我们就可以对大文件进行分片上传的操作,减少失败率。同时在分片上传的基础上,还可以实现断点续传、秒传、展示分片上传进度的效果。

一:总体思路

前端:

1.根据文件内容分片Web Workers(额外线程计算分片),SparkMD5计算文件哈希值(唯一性) 。

2.上传之前先调用一个vertify接口,判断文件是否已经存在,以及是否存在已上传的分片。

3.vertify如果得到信息,文件已经上传,前端直接终止上传流程,进度直接赋值100%(秒传)。

4.vertify接口如果得到文件已经上传的分片,在上传之前先过滤掉已上传的分片,只上传剩下的分片(断点续传)。

5.上传保持并发上传,可支持设置最多并发数,加快上传速度。

6.上传完之后,调用merge接口,告诉后台将分片合并为文件,删除临时分片。

后端:

1.提供文件目录,用来保存上传的文件(无服务器的情况)。

2.根据每一个文件的哈希值单独创建一个目录,目录下面保存着文件的分片。

3.提供给前端vertify接口,根据文件哈希值扫描目录下已存在的分片,并将信息告诉前端(文件是否已经存在,是否存在已经上传过的分片)。

4.前端调用merge接口时,后端将目录文件下的分片合并,并删除临时目录和分片。

二:关键步骤代码(前端)

1.文件分片

image.png

2.计算文件哈希值

image.png

3.上传之前调用vertify接口

image.png

4.并发上传并返回上传进度

image.png

image.png