当先锋百科网

首页 1 2 3 4 5 6 7

如下面代码,多选时,多个文件只显示了第一个上传的。before-upload 会触发多次,但是on-success只触发了一次。上传完成的打印也有多次的。证明多个文件已经上传成功了

 <Upload
                ref="upload"
                type="drag"
                :show-upload-list="showUploadList"
                :format="format"
                multiple
                :before-upload="onBeforeUpload"
                :on-success="onSuccessHandler"
                :on-error="onErrorHandler"
                :max-size="maxSize"
                action="/">
           <div v-for="item in fileList">xxxx</div>
        </Upload>
onBeforeUpload(file) {
	//xxxxxxxxx 处理逻辑;
	return beforeCosUpload(this, file, beforeCheck)
}

onSuccessHandler(response, file) {
        console.info('上传成功', response, file)
        this.fileList.push( {
        	// xxxxxxxxx
        })
      },
      
function beforeCosUpload(self, file, beforeCheck) {
  let uploadVue = self.$refs.upload
  uploadVue.post = function (file) {
     uploadVue.clearFiles() 
    uploadVue.handleStart(file)
    // xxxxxxxxxxxxx
      onProgress(progressData) {
        progressData.percent = progressData.percent * 100
        uploadVue.handleProgress(progressData, file)
      },
      onSuccess(data) {
        // console.info('上传完成`', data) // 在此处有都会触发多次
        uploadVue.handleSuccess(data, file)
      },
      onError(err, data) {
      }
    }

    let result = cosUpload(obj)
  }
  return new Promise((resolve, reject) => {
   // xxxxxxxxxx
  })
  }

最后发现是在后面 uploadVue.post 里面的uploadVue.clearFiles() 影响到了。所以处理一下,加个变量,多选时不去执行清除设置 uploadVue.clearFiles()

return beforeCosUpload(this, file, beforeCheck,false)

function beforeCosUpload(self, file, beforeCheck,isClear = true) {
  uploadVue.post = function (file) {
    if (isClear) {
      uploadVue.clearFiles()  
    }
  }
}