前几天再用element
上传功能时发现,element的上传如果一次选择多张图片,则会提交多次。查看API以及搜索得到解决办法
主要是首先禁用掉自动伤上传 :auto-upload="false" 然后设置自定义提交方法 :http-request="uploadFile",这样的话我们通过 this.$refs.id.submit(); 提交时就可以触发这个 uploadFile方法,这时就将文件装载完毕,然后通过axios发送。
<el-upload class="upload-demo" ref="upload"
action="cunstomer"
name="org_files"
:multiple="true"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false"
:http-request="uploadFile"
>
<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-upload>
<script>
export default {
data() {
return {
fileList:[],
formDate:""
};
},
methods: {
uploadFile(file){
console.log(file.file)
console.log("uploadFile");
this.formDate.append('org_files', file.file);
},
submitUpload() {
console.log("submitUpload");
this.formDate = new FormData()
this.$refs.upload.submit(); //执行此步骤 相当于执行 http-request 的自定义实现方法
this.formDate.append('其他参数名称', "*****");
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
axios.post("url", this.formDate,config).then( res => {
console.log(res)
}).catch( res => {
console.log(res)
})
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
}
}
}
</script>