Web开发编程网
分享Web开发相关技术

大文件分片上传 轻松拿捏

日子一天天的过去,帮她带早餐成为了一天中最快乐的事情了,我和她关系也近了许多,交谈起来也不会再面红耳赤了。一天中午她突然发消息说为了感谢我每天帮她带早餐要请我吃午饭,当时心情只能说开心到炸裂……她带我来到了食堂的二楼吃麻辣香锅,和她走在一起,路人会时不时的瞥向我们,我不知道是因为她的漂亮,还是好奇她居然和我这么一个人走在一起,我很不喜欢这种目光。
      那是我第一次吃麻辣香锅,也是第一次和她在食堂吃饭,感觉麻辣香锅应该是大学最好吃的东西了,就是价格贵了点,我只吃了一点点,好的东西都要留给她,回到寝室后,室友纷纷调侃了我,我也天真的以为我爱情正在路上了,于是我又准备在她生日的表白了,这次我不会怂了……
      终于等到了她生日的那天,我早早的写好了对她的祝福,十二点一过就发给她了,可等了好久都没等到她的回复,我想她应该是睡着了…..本来计划下午把蛋糕送给她,然后约她一起吃个晚饭,联系她的时候,她早已和朋友出去庆生了,独留我对着蛋糕发呆,这种等待是非常煎熬的事情,只能打打英雄联盟来让时间过得快点,5杀我也提不起半点开心….
      她说她快到了,我赶紧放下手上的游戏去她楼下等她,等了好一会才看到她,我把蛋糕小心翼翼的递给她,说了一堆祝福的话,在她快上楼的时候,我终于鼓足了勇气说了,我喜欢你,你能做我女朋友吗?

大文件上传前言

为了方便大家阅读和理解,我将以单个大文件上传为例,先简单描述下思路。
antd的上传组件有一个上传前的钩子,里面是可以拿到file信息,上传前将file切片,然后包装成一个一个的请求,放到一个数组,上传的的时候将数组的请求执行就可以了,执行完后发送一个合并请求,我没有用Promise.all去执行,而是2个2个的递归执行。

对大文件先通过slice进行切片

核心是利用 Blob.prototype.slice 方法

createFileChunk接收两个参数
dataSource:所上传的File大文件,size:每个分片大小

  //切片
     createFileChunk = (dataSource, size = 5 * 1024 * 1024) => {
        const fileChunkList = [];//因为只有一个文件,数组只有1项
        let cur = 0;
        let index = 0;//每个分片给一个索引,最后后端合并按序合并分片
        let obj: IFileChunksList = {
            name:dataSource.name,
            progressArr: [], //记录每一个分片的上传进度
            errChunkFile: [],//上传失败的文件
            keys: [],//将每个分片包装成一个http请求
        };

        let arr = [];
        while (cur < dataSource.size) {
            arr.push(this.createHttp({ hash:dataSource.name+'_'+index, file: dataSource.slice(cur, cur + size)}));
            index += 1;
            cur += size;
        }
        obj.keys = arr;
        fileChunkList.push(obj);
        this.setState({fileChunkList})
    };
复制代码

hash由文件名和序号组成,后端合并的时候需要按顺序合并。

this.createHttp方法分析
简单的做了参数处理,this.request里面才是真是ajax请求
onProgress:监听ajax进度并实时记录下来

   createHttp = (data) => {
        const { hash, file } = data;
        const formData = new FormData();
        formData.append('chunk', file);
        formData.append('hash', hash);
        return () =>
            this.request({
                url: this.props.action,
                data: formData,
                onProgress: this.createProgressHandler(data, hash),
            });
    };
复制代码
为每个分片创建一个http请求

this.request 方法通过promise和ajax包装
url:分片上传接口。data:分片参数。onProgress:监听此分片上传进度。
requestList:所有正在上传的分片请求集合。(断点续传用的)
也可以在此方法里面设置token认证

   //创建ajax
    request = ({
        url, 
        method = 'post',
        data,  
        onProgress = (e: any) => e,
        requestList = this.state.requestList,
    }: IAjax) => {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.upload.onprogress = onProgress;
            xhr.open(method, url, true);
            xhr.setRequestHeader('Authorization', this.props.token);
            xhr.send(data);
            xhr.onload = (e: any) => {
                // 将请求成功的 xhr 从列表中删除
                const { requestList } = this.state;
                if (requestList) {
                    const xhrIndex = requestList.findIndex((item) => item.xhr === xhr);
                    requestList.splice(xhrIndex, 1);
                    this.setState({ requestList });
                }
                resolve({
                    data: e.target.response,
                });
            };
            xhr.onerror = (e) => {
                reject(e);
                // throw new Error('fail');
            };
            requestList.push({ xhr, hash:data.get('hash')});

            this.setState({
                requestList,
            });
        });
    };
复制代码
记录分片进度方法

this.createProgressHandler(data, hash)在上面createHttp方法调用

  createProgressHandler = (item1, hash) => {
        return (e: any) => {
            let { fileChunkList } = this.state;
            let index=hash.split("_")[1]
            fileChunkList[0].progressArr[index]=e.load
            this.setState({
                fileChunkList,
            });
        };
    };
复制代码
调用开始上传的方法

this.upFile(this,state.fileChunkList[0])(true)
参数true是保证2个请求一发

 // 开始上传
    upFile = ( item) => {
        let fileArr=item.keys
        let init = 0;
        let loopFun = (initValue) => {
            fileArr[initValue]()
                .then((res) => {
                    if (JSON.parse(res.data).statusCode === 200) {
                        init++;
                        if (init < fileArr.length) {
                         //继续传下一个分片
                            loop();
                        } else if (init === fileArr.length && !item.errChunk.length && fileArr.length !== 1) {
                        //分片传完,合并分片
                            this.mergeChunk(item);
                        }
                    } 
                })
                .catch((err) => {
                //捕获上传失败的分片存起来
                    let arrChunk = item.errChunkFile.concat(fileArr[initValue]);
                    init++;
                    item.errChunkFile = arrChunk;
                    this.setState({
                        fileChunkList: [...item],
                    });
                    if (init < fileArr.length) {
                        loop();
                    }
                });
        };
        let loop = (initFlag) => {
            loopFun(init);
            if (initFlag) {
                loopFun(++init);
            }
        };
        return loop;
    };
复制代码

合并分片的方法我就不写了,就调用一个接口即可。
假如存在上传失败的分片,会被记录在fileChunkList[0].errChunkFile.对这个失败的数组做一个上传就可以了。

断点续传 暂停

this.state.requestList是当前正在请求的分片集合。暂停就是把请求abort,

upFileCancel = (itemCurrent: IFileChunksList) => {
        this.state.requestList.forEach((item) => {
                item.xhr.abort();
        });
    };
复制代码

续传,可以获取已经上传成功的,然后把未上传的重新上传即可。

总结

我只写了前端的大致实现思想,后端只需提供单个分片上传的接口,合并分片的接口。我的hash用文件名+索引,用spark-md5对文件内容生成一个hash才是最合适的。

单个大文件上传感觉其实并不复杂,知道它的大致思想再去扩展多文件排队上传,断点续传,记录每个文件的进度条、总进度条甚至每个分片的进度条,还要考虑暂停的时候,由于onProgress是实时监听进度条的,当分片上传了百分之80,取消后变为0,进度条回退的情况….

大家对大文件有疑问的,可以评论,最后麻烦点个赞。搬砖不易

看故事学习es6原理的:juejin.cn/post/702429…
作者:舔狗的泪
链接:https://juejin.cn/post/7030987126724362276
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

未经允许不得转载:WEB开发编程网 » 大文件分片上传 轻松拿捏

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。