iview批量上传on-success只触发一次

最新推荐文章于 2024-05-14 17:10:35 发布

原创最新推荐文章于 2024-05-14 17:10:35 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

3 篇文章

订阅专栏

在使用iview进行批量文件上传时遇到问题，虽然before-upload多次触发，但on-success只触发一次，导致只能显示第一个上传文件。进一步排查发现，uploadVue.post中的uploadVue.clearFiles()在多选时影响了上传，通过设置变量避免多选时执行此清除操作，解决了问题。

如下面代码，多选时，多个文件只显示了第一个上传的。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()  
    }
  }
}