《大胖 • 小课》- 说说大文件分片和断点续传
这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第6节-《大文件分片和断点续传》。
《说说文件上传那些事儿》专题已更文章
一般在前端开发中我们上传文件大多是比较小的文件，比如图片、pdf、word 文件等，也只有一些特殊的业务和场景才会需要上传大文件，比如上传一个视频 ，最小也得500M。
那如果文件太大，比如500M 1G 2G 那么大，直接上传会造成什么后果呢？
直接上传过大文件，可能会出链接现超时的情况，而且也会超过服务端允许上传文件的大小限制，导致文件无法上传。
所以解决这个问题我们可以将文件进行分片上传，每次只上传很小的一部分 比如2M，多上传几次就可以啦。
大文件上传-分片
在 ie 时代由于无法使用xhr上传二进制数据，上传大文件需要借助浏览器插件来完成。现在来看实现大文件上传简直soeasy。
先看下demo 效果。
DEMO
实现思路说明
相信大家都对Blob 对象有所了解，它表示原始数据,也就是二进制数据，同时提供了对数据截取的方法slice,而 File 继承了Blob的功能，所以可以直接使用此方法对数据进行分段截图。
- 把大文件进行分段 比如2M，发送到服务器携带一个标志，这里暂时用当前的时间戳，用于标识一个完整的文件
- 服务端保存各段文件，可以看上面截图
- 浏览器端所有分片上传完成，发送给服务端一个合并文件的请求
- 服务端根据文件标识、类型、各分片顺序进行文件合并
- 删除分片文件
HTML
代码略，只需要一个 input file 标签。
JS
//分片逻辑 使用slice() 方法进行分片，像操作字符串一样
var start=0,end=0;
while (true) {
end+=chunkSize;
var blob = file.slice(start,end);
start+=chunkSize;
if(!blob.size){//截取的数据为空 则结束
//拆分结束
break;
}
chunks.push(blob);//保存分段数据
}
<script>
function submitUpload() {
var chunkSize=2*1024*1024;//分片大小 2M
var file = document.getElementById('f1').files[0];
var chunks=[], //保存分片数据
token = (+ new Date()),//时间戳
name =file.name,chunkCount=0,sendChunkCount=0;
//拆分文件 像操作字符串一样
if(file.size>chunkSize){
//拆分文件
var start=0,end=0;
while (true) {
end+=chunkSize;
var blob = file.slice(start,end);
start+=chunkSize;
if(!blob.size){//截取的数据为空 则结束
//拆分结束
break;
}
chunks.push(blob);//保存分段数据
}
}else{
chunks.push(file.slice(0));
}
chunkCount=chunks.length;//分片的个数
//没有做并发限制，较大文件导致并发过多，tcp 链接被占光 ，需要做下并发控制，比如只有4个在请求在发送
for(var i=0;i< chunkCount;i++){
var fd = new FormData(); //构造FormData对象
fd.append('token', token);
fd.append('f1', chunks[i]);
fd.append('index', i);
xhrSend(fd,function () {
sendChunkCount+=1;
if(sendChunkCount===chunkCount){//上传完成，发送合并请求
console.log('上传完成，发送合并请求');
var formD = new FormData();
formD.append('type','merge');
formD.append('token',token);
formD.append('chunkCount',chunkCount);
formD.append('filename',name);
xhrSend(formD);
}
});
}
}
function xhrSend(fd,cb) {
var xhr = new XMLHttpRequest(); //创建对象
xhr.open('POST', 'http://localhost:8100/', true);
xhr.onreadystatechange = function () {
console.log('state change', xhr.readyState);
if (xhr.readyState == 4) {
console.log(xhr.responseText);
cb && cb();
}
}
xhr.send(fd);//发送
}
//绑定提交事件
document.getElementById('btn-submit').addEventListener('click',submitUpload);
</script>
NODE
服务端需要做一些改动，保存分片文件、合并分段文件、删除分段文件。
PS
合并文件这里使用 stream pipe 实现，这样更节省内存，边读边写入，占用内存更小，效率更高，代码见fnMergeFile方法。
//二次处理文件，修改名称
app.use((ctx) => {
var body = ctx.request.body;
var files = ctx.request.files ? ctx.request.files.f1:[];//得到上传文件的数组
var result=[];
var fileToken = ctx.request.body.token;// 文件标识
var fileIndex=ctx.request.body.index;//文件顺序
if(files && !Array.isArray(files)){//单文件上传容错
files=[files];
}
files && files.forEach(item=>{
var path = item.path;
var fname = item.name;//原文件名称
var nextPath = path.slice(0, path.lastIndexOf('/') + 1) + fileIndex + '-' + fileToken;
if (item.size > 0 && path) {
//得到扩展名
var extArr = fname.split('.');
var ext = extArr[extArr.length - 1];
//var nextPath = path + '.' + ext;
//重命名文件
fs.renameSync(path, nextPath);
result.push(uploadHost+nextPath.slice(nextPath.lastIndexOf('/') + 1));
}
});
if(body.type==='merge'){//合并分片文件
var filename = body.filename,
chunkCount = body.chunkCount,
folder = path.resolve(__dirname, '../static/uploads')+'/';
var writeStream = fs.createWriteStream(`${folder}${filename}`);
var cindex=0;
//合并文件
function fnMergeFile(){
var fname = `${folder}${cindex}-${fileToken}`;
var readStream = fs.createReadStream(fname);
readStream.pipe(writeStream, { end: false });
readStream.on("end", function () {
fs.unlink(fname, function (err) {
if (err) {
throw err;
}
});
if (cindex+1 < chunkCount){
cindex += 1;
fnMergeFile();
}
});
}
fnMergeFile();
ctx.body='merge ok 200';
}
});
CODE
https://github.com/Bigerfe/fe-learn-code/tree/master/src/upfiles-demo/demo12
大文件上传-断点续传
在上面我们实现了大文件的分片上传，解决了大文件上传超时和服务器的限制。
但是仍然不够完美，大文件上传并不是短时间内就上传完成，如果期间断网，页面刷新了仍然需要重头上传，这也太浪费时间了，怎能忍得了。
方法1概述
在上面我们实现了服务端的分片保存，现在要做的就是如何检测这些分片，不再重新上传即可。
这里我们可以在本地进行保存已上传成功的分片，重新上传的时候使用spark-md5来生成文件 hash，区分此文件是否已上传，然后在本地进行已上传分片的获取。
- 为每个分段生成 hash 值，使用
spark-md5三方模块 - 将上传成功的分段信息保存到本地
- 重新上传时，进行和本地分段 hash 值的对比，如果相同的话则跳过，继续下一个分段的上传
PS
生成 hash 过程肯定也会耗费资源，但是和重新上传相比可以忽略不计了。
DEMO
HTML
代码略
JS
模拟分段保存，本地保存到localStorage
//获得本地缓存的数据
function getUploadedFromStorage(){
return JSON.parse( localStorage.getItem(saveChunkKey) || "{}");
}
//写入缓存
function setUploadedToStorage(index) {
var obj = getUploadedFromStorage();
obj[index]=true;
localStorage.setItem(saveChunkKey, JSON.stringify(obj) );
}
//分段对比
var uploadedInfo = getUploadedFromStorage();//获得已上传的分段信息
for(var i=0;i< chunkCount;i++){
console.log('index',i, uploadedInfo[i]?'已上传过':'未上传');
if(uploadedInfo[i]){//对比分段
sendChunkCount=i+1;//记录已上传的索引
continue;//如果已上传则跳过
}
var fd = new FormData(); //构造FormData对象
fd.append('token', token);
fd.append('f1', chunks[i]);
fd.append('index', i);
(function (index) {
xhrSend(fd, function () {
sendChunkCount += 1;
//将成功信息保存到本地
setUploadedToStorage(index);
if (sendChunkCount === chunkCount) {
console.log('上传完成，发送合并请求');
var formD = new FormData();
formD.append('type', 'merge');
formD.append('token', token);
formD.append('chunkCount', chunkCount);
formD.append('filename', name);
xhrSend(formD);
}
});
})(i);
}
方法2概述
为什么还有方法2呢，正常情况下方法1没问题，但是需要将分片信息保存在客户端，保存在客户端是最不保险的，说不定出现各种神奇的幺蛾子。
所以这里有一个更完善的实现，只提供思路，代码就不写了，也是基于上面的实现，只是服务端需要增加一个接口。
基于上面一个栗子进行改进，服务端已保存了部分片段，客户端上传前需要从服务端获取已上传的分片信息（上面是保存在了本地浏览器），本地对比每个分片的 hash 值，跳过已上传的部分，只传未上传的分片。
方法1是从本地获取分片信息,这里只需要将此方法的能力改为从服务端获取分片信息就行了。
-getUploadedFromStorage
+getUploadedFromServer(fileHash)
另外服务端增加一个获取分片的接口供客户端调用，思路最重要，代码就不贴了。
小结
本文主要是介绍了大文件如何上传到服务器，以及两种断点续传的方法，代码上可能不够完善，但是只要有了思路，距离实现就完成了80%。
好了就这样了，中午了要开饭了。