Use the upload component in iview to upload multiple files and trigger the callback function only once

use upload component, set mutiple mode, set on-success and on-progress and monitor its callback
1, click the upload file button
2, select multiple files and upload
3, detect file upload and callback when successful

The

file can be uploaded to the server normally, and the server upload API returns 200 ok, correctly, but the front-end component only receives one on-success callback and handles it correctly. Although other tasks are successful, you can see in the fileList of the callback, percentage=100, but showProgress is always true,file.response and does not exist. A callback should be triggered after each file is uploaded successfully

the official issue of iview is as follows: https://github.com/iview/ivie.

                <Upload
                    ref="upload"
                    :show-upload-list="false"
                    :on-success="handleSuccess"
                    :default-file-list="productImgList"
                    :format="["jpg","jpeg"]"
                    :max-size="1024"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="handleBeforeUpload"
                    multiple
                    type="drag"
                    :action="uploadUrl"
                    class="upload-comp"
                    v-show="productImgList.length < 6">
                <div class="upload-icon">
                </div>
            </Upload>
            
          handleSuccess (res, file, fileList) {
            let self = this;
            this.fileList = []
            if (Array.isArray(fileList)) {
                fileList.forEach((item) => {
                    this.fileList.push(item)
                })
            }
            this.fileList = fileList
            self.$nextTick(function(){
                self.$validator.validate("upload"+ self.index);
            });
        },

then:

  watch: {
        fileList(newArr, oldArr) {
            console.log(JSON.stringify(oldArr))
            if (Array.isArray(newArr)) {
                for (let i = 0, len = newArr.length; i < len; iPP) {
                    if (newArr[i].status === "finished"){
                        // console.log(newArr[i])
                        if (newArr[i].response && newArr[i].response.code === "success") {
                            this.productImgList.splice(i, 1, Object.assign({}, newArr[i], {
                                name: newArr[i].response.data,
                                url: global.IMG_URL + newArr[i].response.data,
                                fileName: newArr[i].response.data
                            }))
                        }
                    }
                }
            }
            // console.log(JSON.stringify( this.productImgList))
        }
    }

but only one successful upload event was monitored. How to solve it?

Iview

Mar.03,2021