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后面的数据就被覆盖了。