vue 使用element UI 多个图片上传编辑提交

需求为： 点击上传按钮上传给后台，后台返回给前端一个ID，前端需要保存一下，所有文件都上传之后点击保存把之前存好的ID传给后台。

预览

首先需要循环一下这10条数据，代码为

  
     
{{item.text}}
  
  
    下载全部附件
  


  
    
{{index+1}}{{item.text}}
  
  
    
        上 传
    
  
  
    查看
    删除
     
    {{item.fileName}}
  


  
  
    
      取消
      保存
      保存并提交申请
    
  

export default {
  data() {
    return {
      // 提交
      allData:{
        recComs:'',
        recVaccs:'',
        rec:'',
        recFiles:''
      },
       // 附件上传title
      stateList:[
        {classSty: 'blueBg',text: '疫苗生产企业的相关证明'},
        {classSty: 'yellowBg',text: '疫苗配送企业的相关证明'},
        {classSty: 'violetBg',text: '疫苗委托配送相关协议'},
      ],
      // 附件上传
      filesData: [
        {classSty: 'blueBg', text: '疫苗生产企业的生产许可证',
        indexs:'',companyType:7,sort:'1',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
        {classSty: 'blueBg', text: '疫苗生产企业的统一社会信用代码',
        indexs:'',companyType:7,sort:'2',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
        {classSty: 'blueBg', text: '疫苗生产企业的药品批准证明性文件',
        indexs:'',companyType:7,sort:'3',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
        {classSty: 'blueBg', text: '疫苗生产企业的所在地、区域仓储所在地省级药品监管部门网站报告截图',indexs:'',companyType:7,sort:'4',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
        {classSty: 'blueBg', text: '疫苗生产企业对委托配送企业的审计报告',
        indexs:'',companyType:7,sort:'5',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
        {classSty: 'yellowBg', text: '疫苗配送企业统一社会信用代码',
        indexs:'',companyType:1,sort:'6',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
        {classSty: 'yellowBg', text: '疫苗配送企业的道路运输经营许可证',
        indexs:'2',companyType:1,sort:'7',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
        {classSty: 'yellowBg', text: '疫苗配送企业的接受药品监管部门监督检查承诺书',
        indexs:'',companyType:1,sort:'8',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
        {classSty: 'violetBg', text: '疫苗委托配送储存合同',
        indexs:'',companyType:1,sort:'9',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
        {classSty: 'violetBg', text: '疫苗委托配送质量协议',
        indexs:'',companyType:1,sort:'10',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
        {classSty: 'violetBg', text: '备案人授权委托书',
        indexs:'',companyType:1,sort:'11',
        fileName:'',filePath:'',operId:'',recFileId:'',recId:''},
      ],
      // 存储后台返回的ID
      uploadData:[],
      // 标记上传的位置
      sort: 1,
    };
  }
}

写完这些列表已经循环出来了，给按钮增加单个点击上传事件

相关操作

// 判断上传文件类型及大小
    beforeUpload(file) {
       var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
       const extension = testmsg === 'jpg'
       const extension2 = testmsg === 'png'
       const extension3 = testmsg === 'pdf'
       const isLt2M = file.size / 1024 / 1024 < 10
       if(!extension && !extension2 && !extension3) {
           this.$message({
               message: '上传文件只能是 jpg、png、pdf格式!',
               type: 'error'
           });
       }
       // 也可以在这里增加文件大小限制
       if(!isLt2M) {
           this.$message({
               message: '上传图片大小不能超过 10MB!',
               type: 'error'
           });
       }
       return (extension || extension2 || extension3) && isLt2M
       // return extension || extension2
     },
    // 查看（新窗口打开文件）
    streamClick(item,index){
      let picId = item.filePath;
      // let picId = '792441283980296192';
      window.open(base.sq + '/common/file/view/' + picId);
    },
    // 查看所有（下载文件）
    streamClickAll(){
      let data = {
        fileIdList: this.fileIdListsData
      }
      streamAllChange(data).then((res)=>{
        if(res.type == 'application/json'){
          this.$message({
            message: '下载错误或文件损坏！',
            type: "error"
          });
        }else{
          const fileName = this.recData.companyName+'.zip' // 文件名称
          // 如果不确定文件类型,type可以写空字符串
          const bolb = new Blob([res], { type: 'application/zip' })
          if ('download' in document.createElement('a')) {
            const link = document.createElement('a')
            link.download = fileName
            link.style.display = 'none'
            link.href = URL.createObjectURL(bolb)
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
          }
        }
      })
    },
    // 删除附件
    deleteClick(item,index){
      console.log(item)
      this.$confirm('删除附件', '确定要删除当前附件吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let picId = item.filePath;
        deleteFileChange(picId).then((res) => {
          if(res.code == 20000){
            this.$message({
              message: '删除成功！',
              type: 'success'
            });
            item.filePath = ''
            item.fileName = ''
            this.filesData[item.sort-1].filePath = ''
            this.filesData[item.sort-1].filePath = ''
            this.uploadData[item.sort-1].fileName = ''
            this.uploadData[item.sort-1].fileName = ''
            // 判断是否为必传
            if(item.sort == '7'){
              item.indexs = '2'
            }else{
              item.indexs = ''
              this.filesData[item.sort-1].indexs = ''
            }
          } else {
            this.$message({
                message: res.message,
                type: "error"
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //上传
    uploadChange (fileObj) {
      // 转成后台需要的格式
      let formData = new FormData();
      formData.append("file", fileObj.file);
      // // 上传状态
      upload(formData).then((res) => {
        if(res.code == 20000){
          this.$message({
              message: '上传成功！',
              type: "success"
          });
          this.filesData[this.sort-1].indexs = '1';
          this.filesData[this.sort-1].filePath = res.data.fileId;
          this.filesData[this.sort-1].fileName = fileObj.file.name;
          let companyType = this.filesData[this.sort-1].companyType;
          this.uploadData = this.filesData;
          this.filesData.filter(item=>{
            if(item.sort == this.sort){
              this.uploadData[this.sort-1].filePath = res.data.fileId;
              this.uploadData[this.sort-1].fileName = fileObj.file.name;
            }
          })
        }else{
          this.$message({
              message: res.message,
              type: "error"
          });
        }
      })
    },
    // 上传取当前点击的上传索引
    upload(item,index){
      this.sort = item.sort;
    },
    // 提交
    submitBtn(submitId){
      this.uploadNewData = []
      this.$forceUpdate()
      // 附件名=""并且!=7时附件校验未通过
      for (let item = 0; item < this.filesData.length; item++) {
        if(this.filesData[item].fileName == ''){
          if(this.filesData[item].sort != '7'){
            this.breakStatus = false;
            break;
          }
          // 附件!=""时push新对象传给后台
        }else if(this.filesData[item].fileName != ''){
          this.breakStatus = true;
          this.uploadNewData.push(this.filesData[item])
        }

      }
      // 附件校验
      if(this.breakStatus != false){
        this.allData.recFiles = this.uploadNewData;
        
        // 校验
        let pageId = this.$route.query.pageId;
        const recData = this.$refs['recData'];
        const recComsIf = this.$refs['recComsIf'];
        const recStoresForm = this.$refs['recStoresForm'];
        const recVaccsForm = this.$refs['recVaccsForm'];
        Promise.all([recData,recComsIf,recStoresForm,recVaccsForm].map(this.getFormPromise)).then(res => {
          const validateResult = res.every(item => !!item);
          if (validateResult) {
            
              // pageId：0新增，1编辑，2变更。submitId4保存，1提交申请
              if(pageId == 0){
                this.allData.docType = submitId;
                // this.allData.rec.org_flag = 1;
                let adddata = JSON.stringify(this.allData);

                // console.log("新增")
                addPage(adddata).then((res) => {
                  if(res.code == 20000){
                    this.$message({
                      message: '提交成功！',
                      type: 'success'
                    });
                    this.reload();
                    this.$router.push({path:'/record/applicationIndex/applicationIndex'})
                  } else {
                    this.$message({
                        message: res.message,
                        type: "error"
                    });
                  }
                });
              }
            
          } else {
            this.$message({
                message: '表单未校验通过！',
                type: "error"
            });
            console.log('信息未校验通过！');
          }
        })
      }else{
        this.$message({
            message: '请上传附件！',
            type: "error"
        });
      }
    },