前言

在写公司项目的时候有一个需求：要将多个文件一次性上传。我使用的是element的upload组件，但是upload的组件默认是一个文件上传一次。下面是多文件一次上传的方法（只发送一次请求）

1、从upload组件copy下来修改一下

这里我copy的是upload中‘手动上传’代码。可以在Element-ui-Upload上传中找到 由于我们不需要默认上传，所以我们在<el-upload>中做一些修改：
1）将action设置为空串
2）将auto-upload设置为false，此改动可以让选取文件后不立即上传
3）设置http-request，此属性是用于覆盖element默认的上传行为
如果我说的不是很明白或者对其他属性有疑惑的话，可以去看看upload的文档

<el-upload
    ref="upload"
    action=""  //aciton设置为空
    class="upload-demo"
    :on-change="onChange"
    :before-upload="beforeUpload"
    multiple
    :limit="5"  //最大上传个数
    :on-exceed="handleExceed"
    :file-list="fileList"
    :http-request="uploadFile"  //覆盖默认的上传行为
    :auto-upload="false"  //设置文件不立即上传>
    <el-button size="mini" class="uploadBtn">选择文件</el-button>
</el-upload>

2、data中的数据

data() {
    return {
        formDate: '', //载体
        fileList: [] //展示的文件列表
    }
}

这里的fileLIst是显示在界面的列表（如下图所示）

主要是这个formData，它是载体。我们后面发送请求是将这个formData发送出去

3、确认按钮事件（前半段）

这里的确认事件做了两件事：
1）初始化定义formData
2）调用了upload的submit方法
注意： 这里的this.$refs.upload.submit() 如果我们不做修改的话（不在<el-upload>里面定义http-request属性），它默认是选中文件立即上传。所以，我们这里添加:http-request="uploadFile"，我们自己写一个uploadFile方法覆盖它的默认上传行为。不让它立即上传而是最后一起上传。

onSubmit() {
    this.formDate = new FormData() //初始化定义
    this.$refs.upload.submit() 
}

4、uploadFile覆盖默认上传行为

upload组件会根据fileLIst遍历，即有多少文件，就会执行多少次this.$refs.upload.submit() 。它在每次执行this.$refs.upload.submit() 后，就会调用uploadFile()方法（我们所写的覆盖方法），并且会传入一个file参数。这个时候我们就将每次传来的file通过append()到formData载体里面。这样，后面我们就可以将载体formData直接作为参数传给服务端。

uploadFile(file){
    //参数file文件就是传入的文件流，添加进formDate中
    this.formDate.append('files', file.file)
},

5、 确认按钮事件（后半段）

async onSubmit() {
    this.formDate = new FormData() //初始化定义
    this.$refs.upload.submit() //内部会循环submit，有多少文件就循环几次，每次submit会执行uploadFile方法
    //submit了之后就可以直接将formData当作参数传给服务器
    //我这里是一个调用api的例子，根据你们实际接口来
    await uploadDataApi(this.formDate).then(res => {
        if(res.code === 200) {
            this.$message({
                message: '上传成功',
                type: 'success'
            })
        }
    })
}

submit了之后调用接口直接将formData作为参数调用接口就完成啦。
如果有疑问或者哪里说的不对的欢迎评论区指出