Element-ui upload多文件一次性上传(只发送一次请求)

1,488 阅读2分钟

前言

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

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

这里我copy的是upload中‘手动上传’代码。可以在Element-ui-Upload上传中找到 image.png 由于我们不需要默认上传,所以我们在<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是显示在界面的列表(如下图所示)

image.png

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

3、确认按钮事件(前半段)

这里的确认事件做了两件事:
1)初始化定义formData
2)调用了uploadsubmit方法
注意: 这里的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作为参数调用接口就完成啦。
如果有疑问或者哪里说的不对的欢迎评论区指出