《大胖•小课》说说大文件分片和断点续传

顺便说一句&＃xff0c;没领奖的抓紧加我啦&＃xff0c;我已经发了一波了&＃xff0c;没领的赶紧来了。扫码失败的手动加我vx 223344386

这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第6节-《大文件分片和断点续传》。

《说说文件上传那些事儿》专题已更文章

一般在前端开发中我们上传文件大多是比较小的文件&＃xff0c;比如图片、pdf、word 文件等&＃xff0c;也只有一些特殊的业务和场景才会需要上传大文件&＃xff0c;比如上传一个视频 &＃xff0c;最小也得500M。

那如果文件太大&＃xff0c;比如500M 1G 2G 那么大&＃xff0c;直接上传会造成什么后果呢&＃xff1f;

直接上传过大文件&＃xff0c;可能会出链接现超时的情况&＃xff0c;而且也会超过服务端允许上传文件的大小限制&＃xff0c;导致文件无法上传。

所以解决这个问题我们可以将文件进行分片上传&＃xff0c;每次只上传很小的一部分 比如2M&＃xff0c;多上传几次就可以啦。

在 ie 时代由于无法使用xhr上传二进制数据&＃xff0c;上传大文件需要借助浏览器插件来完成。现在来看实现大文件上传简直soeasy。

先看下demo 效果。

DEMO

实现思路说明

相信大家都对Blob 对象有所了解&＃xff0c;它表示原始数据,也就是二进制数据&＃xff0c;同时提供了对数据截取的方法slice,而 File 继承了Blob的功能&＃xff0c;所以可以直接使用此方法对数据进行分段截图。

• 把大文件进行分段 比如2M&＃xff0c;发送到服务器携带一个标志&＃xff0c;这里暂时用当前的时间戳&＃xff0c;用于标识一个完整的文件
• 服务端保存各段文件&＃xff0c;可以看上面截图
• 浏览器端所有分片上传完成&＃xff0c;发送给服务端一个合并文件的请求
• 服务端根据文件标识、类型、各分片顺序进行文件合并
• 删除分片文件

HTML

代码略&＃xff0c;只需要一个 input file 标签。

JS

//分片逻辑 使用slice() 方法进行分片&＃xff0c;像操作字符串一样var start&＃61;0,end&＃61;0;while (true) {end&＃43;&＃61;chunkSize;var blob &＃61; file.slice(start,end);start&＃43;&＃61;chunkSize;if(!blob.size){//截取的数据为空 则结束//拆分结束break;}chunks.push(blob);//保存分段数据}


NODE

服务端需要做一些改动&＃xff0c;保存分片文件、合并分段文件、删除分段文件。

PS

合并文件这里使用 stream pipe 实现&＃xff0c;这样更节省内存&＃xff0c;边读边写入&＃xff0c;占用内存更小&＃xff0c;效率更高&＃xff0c;代码见fnMergeFile方法。

//二次处理文件&＃xff0c;修改名称
app.use((ctx) &＃61;> {var body &＃61; ctx.request.body;var files &＃61; ctx.request.files ? ctx.request.files.f1:[];//得到上传文件的数组var result&＃61;[];var fileToken &＃61; ctx.request.body.token;// 文件标识var fileIndex&＃61;ctx.request.body.index;//文件顺序if(files && !Array.isArray(files)){//单文件上传容错files&＃61;[files];}files && files.forEach(item&＃61;>{var path &＃61; item.path;var fname &＃61; item.name;//原文件名称var nextPath &＃61; path.slice(0, path.lastIndexOf(&＃39;/&＃39;) &＃43; 1) &＃43; fileIndex &＃43; &＃39;-&＃39; &＃43; fileToken;if (item.size > 0 && path) {//得到扩展名var extArr &＃61; fname.split(&＃39;.&＃39;);var ext &＃61; extArr[extArr.length - 1];//var nextPath &＃61; path &＃43; &＃39;.&＃39; &＃43; ext;//重命名文件fs.renameSync(path, nextPath);result.push(uploadHost&＃43;nextPath.slice(nextPath.lastIndexOf(&＃39;/&＃39;) &＃43; 1));}});if(body.type&＃61;&＃61;&＃61;&＃39;merge&＃39;){//合并分片文件var filename &＃61; body.filename,chunkCount &＃61; body.chunkCount,folder &＃61; path.resolve(__dirname, &＃39;../static/uploads&＃39;)&＃43;&＃39;/&＃39;;var writeStream &＃61; fs.createWriteStream(&＃96;${folder}${filename}&＃96;);var cindex&＃61;0;//合并文件function fnMergeFile(){var fname &＃61; &＃96;${folder}${cindex}-${fileToken}&＃96;;var readStream &＃61; fs.createReadStream(fname);readStream.pipe(writeStream, { end: false });readStream.on("end", function () {fs.unlink(fname, function (err) {if (err) {throw err;}});if (cindex&＃43;1

CODE

https://github.com/Bigerfe/fe-learn-code/tree/master/src/upfiles-demo/demo12

在上面我们实现了大文件的分片上传&＃xff0c;解决了大文件上传超时和服务器的限制。

但是仍然不够完美&＃xff0c;大文件上传并不是短时间内就上传完成&＃xff0c;如果期间断网&＃xff0c;页面刷新了仍然需要重头上传&＃xff0c;这也太浪费时间了&＃xff0c;怎能忍得了。

方法1概述

在上面我们实现了服务端的分片保存&＃xff0c;现在要做的就是如何检测这些分片&＃xff0c;不再重新上传即可。 

这里我们可以在本地进行保存已上传成功的分片&＃xff0c;重新上传的时候使用spark-md5来生成文件 hash&＃xff0c;区分此文件是否已上传&＃xff0c;然后在本地进行已上传分片的获取。

• 为每个分段生成 hash 值&＃xff0c;使用  spark-md5 三方模块
• 将上传成功的分段信息保存到本地
• 重新上传时&＃xff0c;进行和本地分段 hash 值的对比&＃xff0c;如果相同的话则跳过&＃xff0c;继续下一个分段的上传

PS

生成 hash 过程肯定也会耗费资源&＃xff0c;但是和重新上传相比可以忽略不计了。

DEMO

HTML

代码略


JS

模拟分段保存&＃xff0c;本地保存到localStorage

//获得本地缓存的数据function getUploadedFromStorage(){return JSON.parse( localStorage.getItem(saveChunkKey) || "{}");}//写入缓存function setUploadedToStorage(index) {var obj &＃61; getUploadedFromStorage();obj[index]&＃61;true;localStorage.setItem(saveChunkKey, JSON.stringify(obj) );}//分段对比var uploadedInfo &＃61; getUploadedFromStorage();//获得已上传的分段信息for(var i&＃61;0;i

方法2概述

为什么还有方法2呢&＃xff0c;正常情况下方法1没问题&＃xff0c;但是需要将分片信息保存在客户端&＃xff0c;保存在客户端是最不保险的&＃xff0c;说不定出现各种神奇的幺蛾子。

所以这里有一个更完善的实现&＃xff0c;只提供思路&＃xff0c;代码就不写了&＃xff0c;也是基于上面的实现&＃xff0c;只是服务端需要增加一个接口。

基于上面一个栗子进行改进&＃xff0c;服务端已保存了部分片段&＃xff0c;客户端上传前需要从服务端获取已上传的分片信息&＃xff08;上面是保存在了本地浏览器&＃xff09;&＃xff0c;本地对比每个分片的 hash 值&＃xff0c;跳过已上传的部分&＃xff0c;只传未上传的分片。

方法1是从本地获取分片信息,这里只需要将此方法的能力改为从服务端获取分片信息就行了。

-getUploadedFromStorage
&＃43;getUploadedFromServer(fileHash)


另外服务端增加一个获取分片的接口供客户端调用&＃xff0c;思路最重要&＃xff0c;代码就不贴了。