其他分享
首页 > 其他分享> > 2021-03-02

2021-03-02

作者:互联网

iview View UI 多文件上传报错

Uncaught TypeError: Cannot set property 'percentage' of null
    at VueComponent.handleProgress (iview.js?4b49:34142)
    at VueComponent.boundFn [as handleProgress] (vue.esm.js?5425:189)
    at Object.onProgress (iview.js?4b49:34107)
    at XMLHttpRequestUpload.progress (iview.js?4b49:34419)

 

原因略显蛋疼,因为我是上传图片,需要提供预览,所以定义个一个数组uploadList方便遍历,并将该数组和this.$refs.upload.fileList绑定,同时上传多张图片时也是出现同样的问题,对比了一下官方示例,发现我把Upload的参数default-file-list="uploadList", 把该参数的值指向其它数组之后就好了,翻了下源码发现 src/components/upload/upload.vue有这么一段:

watch: { defaultFileList: { immediate: true, handler(fileList) { this.fileList = fileList.map(item => { item.status = 'finished'; item.percentage = 100; item.uid = Date.now() + this.tempIndex++; return item; }); } } },

所以问题来了。。。,这里动态监听了default-file-list的值,由于第一个上传完毕后触发onSuccess,导致fileList被更新,与之绑定的upLoadList也被更新,而uploadList绑定到defaultFileList,然后fileList后面的数据就被覆盖了。

gitbug 解决方案

标签:02,03,uploadList,upload,fileList,js,item,2021,iview
来源: https://blog.csdn.net/qq_23001239/article/details/114281655