Element Upload上传组件,在使用默认的情况下,多个文件上传是多次调用接口。想要多个文件只调用一个接口,就需要替换掉默认的上传方法。
<el-upload
ref="upload"
accept="image/jpg,image/png,image/jpeg"
multiple
:headers="upload.headers"
action="#"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:on-change="handleFileChange"
:auto-upload="false"
:file-list="fileList"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将模板文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
<el-link type="info" style="font-size:12px" @click="getPicTempate()">下载模板</el-link>
</div>
<div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“zip”格式文件!</div>
</el-upload>
需要通过 on-change 钩子函数来对列表进行控制,获取文件列表
handleFileChange(file, fileList) {
let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
if (existFile) {
this.$message.error('当前文件已经存在!');
fileList.pop();
}
this.fileList = fileList;
}
替换默认的提交方法
submitFileForm() {
// this.$refs.upload.submit();
let formData = new FormData()
this.fileList.forEach(item => {
formData.append('files', item.raw)
})
axios({
url: process.env.VUE_APP_BASE_API + "/importImage",
method: 'post',
headers: {'Authorization': 'Bearer ' + getToken()},
data: formData
}).then((data) => {
console.log(data)
if (data&& data.code === 0) {
this.upload.open = false;
this.reset();
// 消息提示
this.$message({
message: '文件上传成功',
type: 'success'
duration: 1500
})
} else {
this.$message.error('文件上传失败')
}
})
}
注释部分就是默认的提交方法,改为axios提交formdata