问题描述:
一次选中多个文件,多次调用上传接口,但是多选的文件上传属于同一批次,后台需要一个uid来区分这是同一批上传的,数据叠加,并且需要选中的所有文件都上传成功了再提示上传成功
先上代码
<el-upload
style="display: inline-block;margin-right: 0.6vw"
action="#"
ref="upload"
class="upload-file"
:http-request="fileUploadHandler"
:before-upload="beforeAvatarUpload"
:on-change="handFileChange"
:show-file-list="false"
multiple
>
<el-button type="primary" size="mini" @click="uploadModel" v-show="!(uploadLoading||anlyseLoading)" :loading="uploadLoading">导入数据</el-button>
</el-upload>
importFlag:0,
selectNum:0,
//导入
uploadModel() {
centerList.fileSameList=[]
},
handFileChange(files, fileList) {
var upload_img = document.getElementsByClassName('upload-file')
let uploadNum = 0
if (upload_img && upload_img.length > 0) {
var upload = upload_img[0].getElementsByTagName('input')
if (upload && upload.length > 0 && upload[0].files && upload[0].files.length > 0) {
uploadNum = upload[0].files.length
centerList.selectNum=uploadNum
}
}
centerList.importFlag= +centerList.importFlag
if(centerList.importFlag === uploadNum) {
//获取同一批上传的uid
proxy.$store.state.importId=fileList[fileList.length-1].uid
}
},
beforeAvatarUpload(file) {
centerList.uploadLoading=true
var FileExt = file.name.replace(/.+\./, "");
if (['zip',"xls","xlsx"].indexOf(FileExt.toLowerCase()) === -1){
proxy.$message.error("文件格式有误,请重新上传")
centerList.uploadLoading=false
return false;
}
},
importUid:'',
uploadLoading:false,
fileSameList:[],
fileUploadHandler(event) {
const formData = new FormData();
proxy.$nextTick(()=>{
//分析结果导入id根据导入数量确定(导入一个用event.file.uid,否则用proxy.$store.state.importId)
let impId=proxy.$store.state.importId&¢erList.selectNum>1?proxy.$store.state.importId:event.file.uid
formData.append("file", event.file);
formData.append("importId", impId);
formData.append("modelId", centerList.modelSelectData);
formData.append("analysisId", data.tabIdselect);
proxy.$Api
.Post(`tactics/import`, formData)
.then((res) => {
centerList.fileSameList.push(event.file)
if(res.code===1) {
if(centerList.fileSameList.length===centerList.selectNum) {
proxy.$message.success('导入成功!')
proxy.$store.state.importId = impId
data.queryList()
}
}
if(centerList.fileSameList.length===centerList.selectNum){
centerList.uploadLoading=false
}
})
.catch(() => {
centerList.uploadLoading=false
});
})
},
主要就是获取到多选的文件数量,用on-change="handFileChange"来获取,再根据这个来进行后续的逻辑处理