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 解决方案