DAS文件上传组件的进化
背景: DAS为用户提供快速导入数据的功能，允许用户上传最大为15M的SQL/CSV文件
一、原始阶段
一提到文件上传，首先想到的是使用最原始的html的input标签，把类型设置为file就可以了。
<!-- 核心代码 --> <form action="upload" method="POST" enctype="multipart/form-data"> <input type="file" /> <input type="submit" /> </form>
优点：原生HTML，简单粗暴，没有任何炫技
缺点
1.1 第1次进化（美化）
HTML的label标签for属性：表示lable标签要绑定的HTML元素，点击这个标签的时候，所绑定的元素将获取焦点。（以前这个特点经常用来在点击checkbox后面的文字时，选中/反选checkbox），所以对于文件选择器一样适用，利用这一点可以实现第1次进化（样式的进化）
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
font-size: 14px;
font-weight: 400;
color: white;
background-color: #23c6c8;
...
}<input type="file" id="uploader" accept=".sql" class="inputfile" /> <label for="uploader">上传...<label>
藏起来，把它的宽高都设置成0.1px，透明度设置为0等等无所不用其极，再精心的修改label标签的样式，使其符合DAS的风格，这样文件上传就完成了第1次进化。
优点：仍然是HTML原生支持，只是使用了一点小技巧，可以通过定义css使其适配目标系统的风格
缺点：对于一些较大的文件，上传过程会卡死（或者是接口超时都还没有上传完）
1.2 第2次进化（分段上传）
导入的文件大小限制在15M时，线上表现一直很好。直到有很多用户提出15M的限制太小了，于是DAS开始支持最大1G文件的导入。
实现思路：
调用接口获取1个UploadID
读入文件，然后把文件切割成10M/个的分段（最大103个分段）
上传所有的分段所有分段都完成后，通知服务端根据uploadID合并文件
这个思路的核心在于如何在前端进行文件的分割：
FileReader API提供了读取用户本地文件的能力，
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于BlobBlob.slice(start, end, contentTyp)返回一个新的
Blob对象，包含了源Blob对象中指定范围内的数据。
核心伪代码：
let chunks = Math.ceil(size / CHUNK_SIZE);
let fileReader = new FileReader();
fileReader.onload = e => {
let fileData = new Blob([e.target.result]);
currentChunk++;
if (currentChunk < chunks) {
/* 文件分片读完了，马上开始调接口上传文件 */
uploadToServer(fileData).then(()=>{
/* 读取下一个分片 */
loadNext();
}).catch(err=>{
/* 错误处理 */
})
}
};
function loadNext() {
var start = currentChunk * CHUNK_SIZE,
end = start + CHUNK_SIZE >= file.size ? file.size : start + CHUNK_SIZE;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();在实现了分段上传后，1G文件不会再产阻塞的问题，可以顺利的上传完成，上传的过程如下图所示：
1.3 第3次进化（多轮分段读取 + 前端并发控制）
既然已经支持1G了，为了拉开和竟品的差距（DMS支持最大100M），DAS索性直接支持10G文件的导入。简单进行分段上传的问题开始显现出来。
当只支持1G的时候，把1G文件切分后的。10G的文件全部读入是不可能的（用户内存可能都没有10G）
10G文件最大有1000+个分片，顺序上传的效率又太低，必须采用并发上传的方式
对于第1个问题还比较容易修改，只需要加入最大入的分段数的控制即可，这样就变成了多轮分段读取的方式了，核心代码如下：
fileReader.onload = e => {
let fileData = new Blob([e.target.result]);
/* 把文件分片保存在组件中 */
fileParts.push(fileData);
currentChunk++;
if (currentChunk < chunks && fileParts.length < 12) { // 加入一个判断的条件
/* 文件分片还没有读完,继续读 */
loadNext();
} else {
fileParts.forEach(parts=>{
/* 文件分片读完了，开始调接口上传文件 */
})
// 分段上传完成后，把存储分段的数组清空即可。
fileParts = [];
// 重新开始新一轮的读取
loadNext()
}
};第2个问题，如果要采用并发上传的方式，就必须引入一个并发控机制，确保同时上传分段数最多不超过3个，实现并发控制其实也比较简单，受数组的map方法启发，极简版本的实现核心代码如下：
let mapLimit = (list, limit, asyncHandle) => {
let recursion = (arr) => {
return asyncHandle(arr.shift())
.then(()=>{
if (arr.length!==0) return recursion(arr) // 数组未迭代完，递归继续
else return 'finish';
})
};
let listCopy = [].concat(list);
let asyncList = []; // 正在进行的所有并发异步操作
while(limit--) {
asyncList.push( recursion(listCopy) );
}
return Promise.all(asyncList); // 所有并发异步操作都完成后，本次并发控制迭代完成
}
// 测试
var dataLists = [1,2,3,4,5,6,7,8,9,11,100,123,321,789,987];
var count = 0;
mapLimit(dataLists, 3, (curItem)=>{
return new Promise(resolve => {
count++
setTimeout(()=>{
console.log(curItem, '当前并发请求:', count--)
resolve();
}, Math.random() * 5000)
});
}).then(response => {
console.log('finish', response)
})两者结合起来的伪代码：
fileReader.onload = e => {
let fileData = new Blob([e.target.result]);
/* 把文件分片保存在组件中 */
fileParts.push(fileData);
currentChunk++;
if (currentChunk < chunks && fileParts.length < 12) { // 加入一个判断的条件
/* 文件分片还没有读完,继续读 */
loadNext();
} else {
mapLimit(fileParts, 3, async (file,callback)=>{
await uploadToServer(file).then(()=>{
// 分段上传完成后，把存储分段的数组清空即可。
fileParts = [];
// 重新开始新一轮的读取
loadNext();
}).catch(err=>{
// 预留给下一次进化
})
})
}
};1.4 第4次进化（重试 ）
虽然流式读取和前端并发控制已经很大程度上改善了过程，但是然后有不足之处：
一旦1000+中任何一个分片出错了，整个上传就失败了。这一点没有好好利用分段数据的优势：哪个分段上传不成功，重新上传该分段即可，不用重新上传整个文件。
fileReader.onload = e => {
let fileData = new Blob([e.target.result]);
/* 把文件分片保存在组件中 */
fileParts.push(fileData);
currentChunk++;
if (currentChunk < chunks && fileParts.length < 12) { // 加入一个判断的条件
/* 文件分片还没有读完,继续读 */
loadNext();
} else {
mapLimit(fileParts, 3, async (file,callback)=>{
await uploadToServer(file).then(()=>{
// 分段上传完成后，把存储分段的数组清空即可。
fileParts = [];
// 重新开始新一轮的读取
loadNext();
}).catch(async err=>{
// 进行5次重试
let retryCounts = 0;
for (let i = 0; i < MAX_RETRY; i++) {
retryCounts++;
let [retryErr, retryData] = await uploadToServer(file)
.then(rs => {
return [null, rs.data];
}
.catch(retryErr => [retryErr]);
if (retryErr) {
/* 重试仍然挂了,继续重试 */
continue;
} else {
/* 重试成功了 */
callback(null, retryData);
break;
}
}
})
})
}
};即使进行了几次优化，但是上传10G文件仍然需要花好久，所以需要允许用户取消文件上传；中途取消也分为两个部分：
分片读取中断，不再发送新的分片上传请求
正在上传中的分片取消请求
第1个诉求只需要在代码中加入标记位cancelFlag即可，用户点取消时，将cancelFlag设置为true即可，核心代码如下：
function loadNext() {
if(!this.state.cancelFlag) {
var start = currentChunk * CHUNK_SIZE,
end = start + CHUNK_SIZE >= file.size ? file.size : start + CHUNK_SIZE;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
} const CancelToken = axios.CancelToken;
const source = CancelToken.source();
post('/upload', {
cancelToken: source.token //请求体或者头部传递一个cancelToken
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
source.cancel('Operation canceled by the user.');二、重构的效果
15M同步上传 -> 1G分段顺序上传 -> 10G多轮分段并发上传
最大支持10G文件上传
上传效率高
自动重试
- 点赞
- 收藏
- 关注作者
评论（0）