正常情况下选择多文件上传后会几个文件就调用几次接口,当后台需要一起拿到多个文件数据做处理时,则不能实现。
<span class="upload_icon" title="导入" @click="importPolt"></span>
<el-upload
ref="uploadBtnRef"
style="display: none"
class="upload-demo"
:action="uploadUrl"
:multiple="true"
:auto-upload="false"
:show-file-list="false"
accept=".dbf,.fix,.prj,.shp,.shx">
</el-upload>
<script>
export default {
data() {
return {
uploadUrl: this.$url.NAVIGATION + "/coGeojson/shpToGeojson",
}
},
mounted(){
let elUpload = this.$refs.uploadBtnRef.$el.querySelectorAll('input')[0];
elUpload.addEventListener('change',(e)=>{
let uploadFiles = elUpload.files;
let formData = new FormData();
formData.append("token",this.$store.state.token);
for(var i in uploadFiles){
formData.append("file",uploadFiles[i]);
}
this.$post(this.uploadUrl,formData,{headers:{'Content-Type':"multipart/form-data"}})
.then((res)=>{
if(res.data.code == 1){
//做操作
elUpload.value = "";
}
})
.catch(()=>{
elUpload.value = "";
})
})
},
methods:{
importPolt(){
this.$refs["uploadBtnRef"].$refs["upload-inner"].handleClick();
},
}
}
</script>