DAS文件上传组件的进化

举报
前端小盆友 发表于 2020/02/25 19:19:40 2020/02/25
【摘要】 背景: DAS为用户提供快速导入数据的功能,允许用户上传最大为15M的SQL/CSV文件一、原始阶段一提到文件上传,首先想到的是使用最原始的html的input标签,把类型设置为file就可以了。<!-- 核心代码 --><form action="upload" method="POST" enctype="multipart/form-data"> <input type="fi...

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


一、原始阶段

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

1582629126806543.png

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


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

1582629211411778.png


优点:仍然是HTML原生支持,只是使用了一点小技巧,可以通过定义css使其适配目标系统的风格

缺点:对于一些较大的文件,上传过程会卡死(或者是接口超时都还没有上传完)

1.2   第2次进化(分段上传)

导入的文件大小限制在15M时,线上表现一直很好。直到有很多用户提出15M的限制太小了,于是DAS开始支持最大1G文件的导入。

实现思路:

  • 调用接口获取1个UploadID

  • 读入文件,然后把文件切割成10M/个的分段(最大103个分段)

  • 上传所有的分段所有分段都完成后,通知服务端根据uploadID合并文件

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

  • HTML5提供的 FileReader API提供了读取用户本地文件的能力,FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象指定要读取的文件或数据。

  • 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文件不会再产阻塞的问题,可以顺利的上传完成,上传的过程如下图所示:


1582629314992985.png


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+中任何一个分片出错了,整个上传就失败了。这一点没有好好利用分段数据的优势:哪个分段上传不成功,重新上传该分段即可,不用重新上传整个文件。

于是可以在上传过程中发生错误的时候进行重试,当然重试也不应该是无限制的(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文件上传

  • 上传效率高

  • 自动重试

  • 可中途取消上传


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。