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