Vue, Upload the picture in AntDesign, the state is always uploading, and step in the pit

Requirement: Multiple file uploads, binding FileList echo when uploading

Problem: The upload was successful and the data returned from the background was obtained, but the file status was uploading all the time when OnChang was listening

Reason: OnChange only fires once

Fix: The @change event is triggered at least twice when uploading a single file, once with file.status=uploading, and the last time with either done or 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 }},

But if you need to upload and display a set of files, then you need to save the state of the file with an attribute :file-list=”fileList”. At this time, the change event will only trigger once. You should always keep track of the state of the FileList in onChange, making sure that all the states are synchronized in the Upload

AndLechangefile (info, code) {// Upload file 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: The info. The file. The response. The data. The url})} this. FileList = fileList [...] / / the key},

The last line is the key. FileList must be synchronized regardless of the status of the file upload, and return must not be used, otherwise there will be no callback

Thanks to: https://blog.csdn.net/zhhao1/article/details/107106890