鍍金池/ 問答/HTML/ 使用iview中的upload組件,上傳多文件,只觸發(fā)一次回調(diào)函數(shù)

使用iview中的upload組件,上傳多文件,只觸發(fā)一次回調(diào)函數(shù)

使用upload組件,設(shè)置了mutiple模式,設(shè)置on-success , on-progress 并監(jiān)聽其回調(diào)
1,點(diǎn)擊上傳文件按鈕
2,選擇多個(gè)文件并上傳
3,檢測(cè)文件上傳及成功時(shí)的回調(diào)

文件可以正常上傳到服務(wù)器上,服務(wù)端上傳接口也正確返回了200 ok,但是前端組件只接收到了一次on-success回調(diào)并正確處理,其他任務(wù)雖然成功,在回調(diào)的fileList中可以看到,percentage=100,但是showProgress始終為true,file.response也不存在。按說應(yīng)該每個(gè)文件上傳成功之后都應(yīng)該觸發(fā)回調(diào)

iview官方的issue如下: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);
            });
        },

然后:

  watch: {
        fileList(newArr, oldArr) {
            console.log(JSON.stringify(oldArr))
            if (Array.isArray(newArr)) {
                for (let i = 0, len = newArr.length; i < len; i++) {
                    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))
        }
    }

但是只監(jiān)聽到一次上傳成功事件,請(qǐng)問怎么解決?

回答
編輯回答
忘了我

圖片描述

https://jsfiddle.net/hfhan/dg...

剛才試了下官網(wǎng)的例子,一次上傳2個(gè)文件運(yùn)行了2次回調(diào)函數(shù),所以是不是你的版本問題,還是想問watch中的fileList只監(jiān)聽到一次??

另外

this.fileList = []
if (Array.isArray(fileList)) {
    fileList.forEach((item) => {
        this.fileList.push(item)
    })
}
this.fileList = fileList

你這一堆寫的沒意義

this.fileList = fileList

直接這樣寫就可以了

2018年8月11日 05:06
編輯回答
毀了心

我的版本是2.11.0,我想實(shí)現(xiàn)的效果是所有文件上傳成功后才做我自己的業(yè)務(wù)操作

2017年1月18日 09:01