elementui el-upload一次请求上传多个文件的实现
作者：D浩DzD
使用ElementUI Upload的时候发现如果是默认方案,上传多张图片并不是真正的一次上传多张,本文就来介绍一下elementui el-upload一次请求上传多个文件的实现,具有一定的参考价值,感兴趣的可以了解一下
在使用element中的el-upload是时，当我们要上传多个文件时，el-upload内部会多次调用this.$refs.upload.submit();方法，从而实现多个文件上传，但是有时候，我们希望，当上传多个文件的时候，只给后端发送一次请求，这样就需要先把el-upload的自动上传改为手动上传:auto-upload=“false”
<el-upload
ref="upload"
:limit="10"
accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx"
name="files"
:multiple="true"
:action="baseURL"
:headers="myToken" <!-- 请求头设置 -->
:on-change="handleFileChange"
:before-remove="handleFileRemove"
:auto-upload="false"
:file-list="upload.fileList"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
<el-button type="primary" @click="submitFileForm">确 定</el-button>data(){
return {
upload: {
fileList: [],
fileName: []
},
}
}通过FormData创建一个数据对象，并且将上传的文件append到对象中
// 上传发生变化钩子
handleFileChange(file, fileList) {
this.upload.fileList = fileList;
},
// 删除之前钩子
handleFileRemove(file, fileList) {
this.upload.fileList = fileList;
},
// 提交上传文件
submitFileForm() {
// 创建新的数据对象
let formData = new FormData();
// 将上传的文件放到数据对象中
this.upload.fileList.forEach(file => {
formData.append('file', file.raw);
this.upload.fileName.push(file.name);
});
console.log("提交前",formData.getAll('file'));
// 文件名
formData.append('fileName', this.upload.fileName);
// 自定义上传
this.$api.uploadFile(formData).then(response => {
console.log(response);
// if(response.code == 200){
// this.$refs.upload.clearFiles();
// this.msgSuccess('上传成功！');
// }else{
// this.$message.error(response.msg);
// }
})
.catch(error => {
this.$message.error('上传失败！');
});
},使用自定义上传的接口，而不是使用*this.$refs.upload.submit();*方法
注意上传文件接口的请求头中headers中的’Content-Type’要为’multipart/form-data’
// 封装的上传请求
uploadFile(params) {
return axios.post(`/shiro/swpe/permission/uploadOrStartProceBPS`, params,
{ headers: { 'Content-Type': 'multipart/form-data', token: window.localStorage.getItem('token')}})
},到此这篇关于elementui el-upload一次请求上传多个文件的实现的文章就介绍到这了,更多相关elementui el-upload请求多文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！