微任务队列实现element upload组件多文件一起自动上传

开发过程中一般上传我都是自己搞一个，灵活方便，但是既然用了element UI，能直接用它提供的最好了，不过有时个别逻辑还是得自己处理一下。

例如：它是选择每个文件都会触发钩子。内部代码如下

但是如果想要选择完多个文件一起自动上传好像不太好弄，现在我们就来自己搞一下;

通过代码可以看到，它是在input change的时候拿到选择的文件列表然后用foreach挨个调 了他提供的钩子函数，没有啥异步过程，那我们就可以用微任务队列来聚合多个同步操作了

methods中代码如下

uploadReduce () { // 多个同步函数结果聚合，fileList存储文件
    let fileList = [];
    let flag = false; // 开关，保证只生成一个微任务
    function reset () { // 重置操作
        fileList = [];
        flag = false;
    }
    return (file) => {
        fileList.push(file);
        if (!flag) {
            Promise.resolve().then(() => {
                this.doUpload(fileList, reset)
            })
            flag = true
        }
        return false; // 阻止el-upload自己上传
    }
}
doUpload (fileList, reset) {
    let formData = new FormData();
    for (let file of fileList) {
        formData.append('multipartFiles', file)
    }
    provider.post(uploadUrl, formData, {
        'Content-Type':'form-data'
    }).then(res => {
        if (res.code === 200) {
            reset();
            this.fileList = res.data;
        }
    }, reset)
}

上传组件中的使用

<el-upload action="" :auto-upload="true" :before-upload="upload()" multiple :file-list="fileList"/>