项目需求是 多个文件上传，在一次请求中完成，而ElementUI的上传组件是每个文件发一次上传请求，因此我们借助FormData的格式向后台传文件组（由于本项目的特殊性，必须使用es5，所以使用ajax传参使用axios也可，只需改变书写形式）
html部分
- 修改:auto-upload="false"属性为false，阻止组件的自动上传
- :http-request="uploadFile"覆盖上传事件
- @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
