使用promise解决循环请求接口数据(for循环)&使用el-upload组件自定义上传文件

 template部分:

           //设置不自动上传
            选取文件
            上传到服务器
          

method部分:

    submitUpload(){
      this.count = 0 //用来判断是否所有文件都上传了
      var promiseList = [] //新建异步列表,一定要用[]
      let { uploadFiles } = this.$refs.upload //获取上传文件列表
      for(let i = 0;i < uploadFiles.length;i++){
      let formData = new FormData();
      let modules='summary'
      formData.append('file',uploadFiles[i].raw);
      formData.append('meetingKey',this.summaryForm.meetingKey); 
      formData.append('creator',this.summaryForm.creator);   
      formData.append('module',modules);     
      promiseList.push(new Promise((resolve, reject)=> {
        summaryApi.addSummary(formData).then(res =>{//for循环中请求接口
          if (res.status) {
            this.count++
            resolve(i)
          }
        })  
      }))  
      }
      Promise.all(promiseList).then(result => {
          //TODO
            if(this.count === uploadFiles.length){ //如果相等,说明所有文件都上传成功
              this.$message({
                message: "上传成功",
                type: "success"
              });         
              this.isShowDeviceDlg.showEdit = false; //关闭该dialog窗口
            }else{
              this.$message({
                message: "上传失败",
                type: "err"
              });        
            } 
      });
     
    },

以上面批量上传文件为例,使用了Promise.all来处理异步操作,只有所有接口都请求完成后才会执行Promise.all里面的内容。

你可能感兴趣的:(web前端)