element-ui el-upload 控制台错误 Uncaught TypeError: Cannot set property ‘status’ of undefined 的原因和解决办法
出现的问题
- 查看控制台报错
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8afb268d19f66088107d866d3cd218b9.png#pic_center)
- 断点调试
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/41a0704bc39f377af4b00dbbb9231329.png#pic_center)
在这里调试我们发现,file
为undefined
。我们进到getFile
函数看到,this.uploadFiles
方法的值为空,不能够进入到下面的every
循环,而this.uploadFiles
的值来自于父组件的fileList
,所以我们就把错误定义到父组件中的fileList
传值问题上。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/44bf8a72d71836f6fe5ed46b591474db.png#pic_center)
- 找出问题所在
之前也在网上找过资料,看过一篇文章,可能是在el-upload
钩子函数uploadChange
做了文件过滤,将文件大小大于0的都进行了禁止上传。所以我也在相对应的函数中去找是否有这样的事情发生,结果发现并没有自定义这个方法过滤。所以我也就排除了这个问题,结果找到了这个问题。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a508f9386d1758df2f6e141e44151500.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f3b8c35a8fcc4082a79d4434dc890e8c.png#pic_center)
我们发现在before-upload
钩子函数中,将当前的文件列表给清除了(我并不知道这位前人做这一步骤的原因是什么),这也就是为什么fileList
为空的原因,所以最后将这句代码删除就能正常上传了。
总结:
出现了类似于上面的问题,基本上都是因为 fileList 造成的,所以在钩子函数中查找是否将 fileList 进行过特别处理的时候是否操作失误而造成的问题是犹关重要的。
本文借鉴:[el-upload控制台错误Cannot set property 'status' of undefined的原因和解决办法](https://blog.csdn.net/sinat_36521655/article/details/105078142?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param)