欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【华为云技术分享】DAS文件上传组件的进化

程序员文章站 2022-05-17 20:58:12
...

背景:  DAS为用户提供快速导入数据的功能，允许用户上传最大为15M的SQL/CSV文件

一、原始阶段

一提到文件上传，首先想到的是使用最原始的html的input标签，把类型设置为file就可以了。

【华为云技术分享】DAS文件上传组件的进化

<!-- 核心代码 -->
<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>

为了把【华为云技术分享】DAS文件上传组件的进化藏起来，把它的宽高都设置成0.1px，透明度设置为0等等无所不用其极，再精心的修改label标签的样式，使其符合DAS的风格，这样文件上传就完成了第1次进化。

【华为云技术分享】DAS文件上传组件的进化

优点：仍然是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文件不会再产阻塞的问题，可以顺利的上传完成，上传的过程如下图所示：

【华为云技术分享】DAS文件上传组件的进化

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文件上传

  • 上传效率高

  • 自动重试

  • 可中途取消上传

相关标签： 技术交流

上一篇： access_log - 如何在nginx中忽略某些php动态请求的log

下一篇： js和php判断当前是否为微信浏览器？，jsphp

推荐阅读