element-ui upload multiple多选时 Cannot set property ‘status‘ of null错误解决方案

最新推荐文章于 2024-08-29 10:11:14 发布
最新推荐文章于 2024-08-29 10:11:14 发布
阅读量2.5k 收藏
点赞数 1
分类专栏： vue element-ui 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_39049092/article/details/115964741
版权
本文介绍了如何在Element UI的Upload组件中避免因直接修改fileList引发的错误，通过创建uploadList变量管理和成功回调中的数据处理，提供了一个无错操作方式，同时保持了父组件的同步更新。
摘要由CSDN通过智能技术生成

在使用element-ui中的Upload组件时, 当我们需要手动修改fileList的时候会报错如下：
在这里插入图片描述
其实这是element组件告诉我们不能直接修改fileList的值。网上有罗列出几种方法来阻止组件的原生事件，实际上这些方法在指定上传文件可多选时是不可取的。这里我通过自己的踩坑，得出一下完美解决方案：

1.在data里面定义再一个变量uploadList用于操作fileList

在这里插入图片描述
这里我们定义的uploadList可用于更改fileList的值，并且传回给父组件或者做其他事情

2.上传成功回调里面给uploadList赋值

在这里插入图片描述
在这里我们用uploadListj接收每次上传成功之后回调的url，并处理其格式，最终将数据发送给父组件，供以使用。可以发现，这样控制台不再报错，同时父组件也接受到了正确的值！

Mr.Hu.
关注
专栏目录
定时关闭广告2020/11/24
weixin_50286102的博客
11-24 531
setTimeout(function() { ad.style.display = ‘none’ }, 2000) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
Puppeteer开发过程中遇到的问题及解决方案
m0_54849806的博客
02-21 7300
工欲善其事必先利其器，请先检查本机是否安装NodeJS环境以及查阅API： Google官方文档：https://developers.google.com/web/tools/puppeteer API（v12.0.1）文档：https://pptr.dev/#?product=Puppeteer&version=v12.0.1&show=outline 问题：如何处理各种验证码？ 解决方案：建议大家去搜索对应的解决方案，Puppeteer并无此类解决方案。 问题：某些网站做了JS防爬检测
解决Cannot set properties of undefined (setting ‘status‘)
weixin_52169403的博客
03-24 4226
解决Cannot set properties of undefined (setting 'status')
el-upload 批量上传报错 Uncaught TypeError: Cannot set properties of null (setting ‘status‘)
weixin_59685936的博客
12-15 3023
el-upload 批量上传报错 Uncaught TypeError: Cannot set properties of null (setting 'status')
解决 element-ui upload Cannot set properties of null (setting ‘status‘)
最新发布
qq_41794167的博客
08-29 227
element-ui upload Cannot set property ‘status‘ of null
Element-ui中el-upload一次上传多张照片报错 Uncaught TypeError: Cannot set property ‘status‘ of null
qq_43235503的博客
05-24 769
Element-ui中el-upload报错 Uncaught TypeError: Cannot set property ‘status‘ of null
element upload 自定义上传 报错Cannot set properties of null (setting ‘status‘)
mrliucx的博客
01-15 1051
自定义上传方式fileList 显示一切正常，状态也是成功文件url通过URL.createObjectURL(file.raw) 进行添加以下为配置代码以下为fileList 添加代码。
element-ui upload Cannot set property ‘status‘ of null错误解决方案
a1455990364的博客
10-22 5353
1. 在使用element-ui中的Upload组件时, 当我们需要手动修改fileList的时候会报错 this.fileList.push({ xxx }); 网上有另一种解决方案是通过另一个变量去控制, 不修改fileList即可, 因为fileList是一个不可修改的. 我的解决方式很简单, 没有那么繁琐, 直接return false; 阻止原生组件上传事件即可.: ...
element upload 报错Cannot set property 'status' of null
热门推荐
qq_36437172的博客
01-31 1万+
使用element UI的upload组件，打开页面的时候默认从后台加载文件信息，然后显示进去。问题：这个时候用户去删除这个后台的文件，在上传新的文件的时候报错。 BUG重现 通过使用element-ui 来上传文件： &lt;el-upload class="upload-demo" :action="img" :on-preview="handlePreview" ...
Element UI 上传图片组件（支持多传和单传），报错Cannot set property 'status' of null
qq_32849999的博客
03-24 2765
使用组件页面代码： <d2-upload v-model="form.uploaderUrlArray" :limit="5" accept=".png,.jpg,.jpeg" multiple /> 组件代码，我这里图片是上传到七牛服务器的。注意fileLIst是只读的，不能修改。我们这里使用uploadList来保存我们需要改动的数组，否则报错Cannot set prope...
Vue 指令函数的简写形式
mqingo的博客
01-07 4831
  10指令函数的简写形式.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=
SSM整合---狂神说Java学习笔记
rzz65452064的博客
11-29 2805
SSM 整合 哔哩哔哩狂神说Java学习网址 文章只为分享学习经验和自己复习用，学习还是该去查看正规视频网站和官方文档才更有效 文章目录SSM 整合一、环境要求二、数据库环境三、基本环境搭建四、Mybatis层编写五、Spring层编写六、Spring MVC层编写七、Controller 和 视图层编写1、先简单编写，测试一下后端底层代码是否正确2、开始正是编写前端3、添加书籍4、修改、删除书籍八、项目结构图九、全部代码十、小结及展望十一、报错或Eclipse使用问题1、eclipse-maven-web
10_Flink Streaming jobSubmit
codemosi的专栏，点击我可以跳到目录一栏
06-09 8269
./bin/flink run ./examples/batch/WordCount.jar 通过shell提交job后。flink将程序产生的jobGraph和jar包传给 jobmanager（简称JM）。再由jobmanager（类似nimbus）将任务分解到taskmanager（一个jvm带一个taskmanager）运行。 JM将jobGraph转化成executionGrap
element-ui中el-upload报错 Uncaught TypeError: Cannot set property ‘status‘ of null
JohnnyAo的博客
09-22 3495
<el-upload class="avatar-uploader" :class="!isEdit ? 'read-file' : 'editFile'" :action="'api/file/upload?_allow_anonymous=true'" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="uploadSuccess" .
Cannot set property ‘status‘ of undefined 之elementUI上传问题
熊宗的博客
12-14 1632
1.原因：fileList在上传过程或者处理函数中被修改或清空，导致fileList数据错误，打印即可看出异常。 2.处理：文件过滤应该放在beforeUpload中，显式返回false即可过滤文件中止上传，尽量将fileList的清空操作放在业务完成之后。 ...
Upload上传文件报错Cannot set property ‘status‘ of undefined
li_970408的博客
08-27 1161
原因是在submit后就直接关闭了模态框，导致组件内status消失只需要在返回结果后再关闭模态框就不会报错了
Cannot set property ‘status‘ of undefined文件上传(问题篇)
skyblue_afan的博客
06-22 1578
一般是手动上传会报这种错误。在点击上传后，一般执行清空已上传的文件列表，this.$refs.upload.clearFiles()。不要把清空的操作放到点击上传中，应该放到上传请求中，应该是上传成功后，清空文件列表。 不应该是点击上传就清空文件列表，这样文件大点时，还没有上传成功，就清空，就会报上述错误。 //下面就是一个手动上传的案例 // 执行上传操作 uploadApk(fileObj) { let data = new FormData(); data.a
Vue中使用的el-upload时批量上传图片时报错问题处理
qq_46011090的博客
03-06 3047
项目场景：项目中有一个文件上传的场景，使用el-upload组件进行上传，单图上传是正常，但是在进行批量上传时报了错。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值