账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    使用iview中的upload组件,上传多文件,只触发一次回调函数
    • 昵称过于强大无法显示2020-01-01 00:00
    23
    0

    使用upload组件,设置了mutiple模式,设置on-success , on-progress 并监听其回调
    1,点击上传文件按钮
    2,选择多个文件并上传
    3,检测文件上传及成功时的回调

    文件可以正常上传到服务器上,服务端上传接口也正确返回了200 ok,但是前端组件只接收到了一次on-success回调并正确处理,其他任务虽然成功,在回调的fileList中可以看到,percentage=100,但是showProgress始终为true,file.response也不存在。按说应该每个文件上传成功之后都应该触发回调

    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))
            }
        }

    但是只监听到一次上传成功事件,请问怎么解决?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 清泉悠悠 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部