ElementUI--Upload 一次请求多文件上传

项目需求是 多个文件上传，在一次请求中完成，而ElementUI的上传组件是每个文件发一次上传请求，因此我们借助FormData的格式向后台传文件组（由于本项目的特殊性，必须使用es5，所以使用ajax传参使用axios也可，只需改变书写形式）

html部分

1. 修改:auto-upload="false"属性为false，阻止组件的自动上传
2. :http-request="uploadFile"覆盖上传事件
3. @click="submitUpload"，给上传按钮绑定事件

image.png

<el-upload ref="upload" action="你的url" :auto-upload="false"  :http-request="uploadFile"
:on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSucess" :file-list="fileList" >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <el-tag v-show="uploadLogo=='1'" >上传中</el-tag>
    <el-tag v-show="uploadLogo=='2'" type="success">上传成功</el-tag>
    <el-tag v-show="uploadLogo=='3'" type="danger">上传失败</el-tag>
</el-upload>

js部分

在data中设置一个变量fileData
在方法中设置FormData的格式
通过ajax发送请求，携带参数为fileData
ajax的参数contentType: false,//这里不要落下

submitUpload: function () {
    this.fileData = new FormData();
    this.$refs.upload.submit();
    this.uploadLogo = "1";
    var that = this;
    $.ajax({
        type: "post",
        url: "你请求的URL",
        data:that.fileData,
        contentType: false,//这里不要落下
        dataType: 'json',
        success: function(data) {
        that.uploadLogo = "2";
        },
        error: function(error) {
        }
    });
},
uploadFile:function(file){
    this.fileData.append('file', file.file);
},

后台

我们使用了springboot为后台按红框处即可收到文件内容

image.png