【华为云技术分享】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，简单粗暴，没有任何炫技

缺点：样子过于陈旧，与DAS的中后台系统的设计格格不入

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合并文件

这个思路的核心在于如何在前端进行文件的分割：

HTML5提供的 FileReader API提供了读取用户本地文件的能力，FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File 或 Blob 对象指定要读取的文件或数据。
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
Blob.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 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+中任何一个分片出错了，整个上传就失败了。这一点没有好好利用分段数据的优势：哪个分段上传不成功，重新上传该分段即可，不用重新上传整个文件。

于是可以在上传过程中发生错误的时候进行重试，当然重试也不应该是无限制的（DAS设计为重试5次，如果某个分片上传失败后，重试5次仍然失败，整个上传过程就认为失败了），核心代码如下：

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;}}})                     })        }
};

1.5 第5次进度（支持中途取消）

即使进行了几次优化，但是上传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));}}

第2个诉求目前还在实装中，主要原理是基于Cancelable Promises Proposal 实现请求的取消。核心代码如下：

 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文件上传
上传效率高
自动重试
可中途取消上传