需求:
多文件上传 ,上传的时候绑定fileList回显
问题:
上传成功了,也拿到了后台返回的数据,但是onchang监听的时候,file的状态一直是uploading
原因:onchange 只触发了一次
解决:
使用单文件上传时@change事件会至少触发两次,一次file.status=uploading,最后一次要么是done或者error,
handleUpload1(info) {
if (info.file.status === 'uploading') {
this.loading = this.isUpload1 = true
return
}
if (info.file.status === 'done') {
this.loading = this.isUpload1 = false
this.params.imgUrl1 = info.file.response.data.url
}
},
但是如果是需要上传显示一组文件,则需要保存文件的状态会给一个属性 :file-list="fileList"
这时候change事件只会触发一次(uploading),后来在github上看到解决方法
对于受控模式,你应该在 onChange 中始终随时跟踪 fileList 的状态,保证所有状态同步到 Upload 内
andleChangeFile (info, code) { //上传文件
console.log('info===>', info, code, info.fileList);
let { fileList } = info
const status = info.file.status
if (status !== 'uploading') {
}
if (status === 'done') {
this.videoUrlList.push({ uid: fileList[fileList.length - 1].uid, url: info.file.response.data.url })
}
this.fileList = [...fileList] //重点
},
最后一行是关键,无论file上传状态如何,filelist一定要同步,还有不能用return,要不然就没有回调了