el-upload多选,多次调用上传接口,多选的文件上传用一个标识,并且上传完再提示上传成功

问题描述:

一次选中多个文件,多次调用上传接口,但是多选的文件上传属于同一批次,后台需要一个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&&centerList.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"来获取,再根据这个来进行后续的逻辑处理

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值