antd Upload组件设置fileList后onChange只执行一次的解决办法

已于 2022-08-25 09:42:14 修改
阅读量9.5k 收藏 7
点赞数 1
分类专栏： 遇到的问题 前端学习 文章标签： Antd Upload react 前端 上传
于 2020-09-09 20:23:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guxuehua/article/details/108501507
版权

最近使用antd Upload组件后发现，当上传失败或者上传格式不正确，也会出现在列表中，想要控制显示列表，需要设置fileList，

设置后发现，onChange只执行一次且拿到的状态一直是uploading,即使服务器上传成功了也拿不到，

最后才发现uploading状态必须设置fileList不然，只执行一次，折腾半天，无语死了，以此记录一下

参考地址

好多小伙伴都打不开github的地址，那我就粘贴一下解决办法

 

 

guxuehua
关注
专栏目录
【antd 的Upload组件onChange方法只执行一次file.status===‘uploading‘，走不到‘done‘的原因和解决方法】
鸭绒的博客
09-23 2901
111
antd upload组件上传图片到七牛云时候得动态传参得方案解决方法
limy_cxm的博客
12-10 4102
如果仅仅是上传图片到七牛云并且不需要动态改变参数的操作行为下面这个方法完全没有问题 <Upload multiple={true} action="https://qiniup.com" ---上传图片的七牛云地址 listType="picture-card" fileList={pictureList} onChange={h...
onchange事件只生效一次的问题
weixin_33901926的博客
10-30 2261
今天遇到一个file表单元素，对onchange事件的响应问题，发现仅响应一次，网上查到解决方法，在这里转载一下文件选择框的onchange事件只在第一次改变时生效，以后再选择文件不会触发onchange事件。解决方法1：用jQuery的live代替直接使用change。错误代码：$(“#fileToUpload”).change(function(){//do somei...
Antd-Upload组件设置fileList属性时onChnage只执行到“uploading“状态引发的一些问题的解决方案
weixin_42159569的博客
12-14 2488
需求：文件上传失败时不需要回显。 思路：添加fileList属性，绑定一个列表，上传成功的文件才加入列表中 ... const [ displayFileList, setDisplayFileList ] = useState<any[]>([]); ... <Upload action="xxx" accept=".xls*, .csv" ... fileList={displayFileList} ... onChang.
记录一次antd from react 的Upload.fileList受控无法接受到onChange的三种状态
B_shuo的博客
01-06 564
【代码】记录一次antd from react 的Upload.fileList受控无法接受到onChange的三种状态。
解决antd upload onchange事件只触发一次的解决方法
weixin_63042378的博客
01-11 1732
解决 upload onchange事件只触发一次的解决方法
antd使用upload时onChange只执行一次
weixin_49662044的博客
08-21 522
react类式组件使用antd的upload时，onChange只执行一次。没有重新设置fileList的值。
使用input file上传文件中onChange事件只触发一次问题 （实用，赞）
chelen_jak的专栏
04-17 2354
原文出处：https://www.cnblogs.com/wind-dk/p/9046123.html 每次上传文件的时候，都会将当前的文件路径保存至$event.target.value中，当第二次选择文件时，由于两次$event.target.value相同，所以不会触发change事件。 解决方案为：在input绑定的change方法中，将当前的$event.target.value置空...
antd upLoad 受控fileList
m0_69645698的博客
01-12 1277
antd upLoad 受控fileList
antd Upload onChange 传参数
fred8的博客
08-10 2308
项目中再table 中添加Upload,Upload中onChange只能返回file参数，如果相对起添加其他参数方便处理可以用下面方法 onChange={(file) => this.handleUploadFileOnChange(file,record) <Form.Item key={index} required> {getFieldDecorator(`table[${record.key}].exampl
antd Upload 文件上传的示例代码
10-17
主要介绍了antd Upload 文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
antd组件Upload实现自己上传的实现示例
12-29
前言 在实现图片上传时，可能需要用到Upload，但是它默认的上传方式是加入图片后直接上传，如果要实现最后再一次性上传，需要自定义内容。 //添加按钮的样式 const uploadButton = ( Upload ); <Upload //样式 className={styles['override-ant-btn']} //陈列样式，现在是卡片式 listType=picture-card
react Antd Upload组件踩坑
qq_48834760的博客
01-16 3098
项目场景： 在实际的开发过程中，我们会遇到一些上传图片的功能，那么如果用React框架来进行开发的话，我们需要用到antd的UI这样一个组件，这个组件我们提供了一个图片开发的一个功能，但是实际上官网提供的这样一个代码是仍需要我们进行一些修改的，否则我们将无法进行一个正常的操作。现在就来看看如何去正常使用这样一个组件 源码显示 antd图片上传组件链接 问题分析： 在这里我们虽然可以进行一个图片的上传，但实际这是一个假操作，因为我们并没有将图片的网址上传网址等一系列的后端接口写在上面，但是它显示成功，实际上这
对 Antd 中的 Upload 组件进行二次封装
weixin_49436239的博客
09-28 1143
问题描述：ant-design中的 Upload并不好用，坑也比较多。比如经常遇到的一个问题是，当使用 fileList 进行受控后，onChange 事件就只能执行一次了。如何更加优雅地把 Upload 进行二次封装，以减少使用时的坑呢？
antd upload组件 手动上传
qq_50465271的博客
10-04 4052
antd 的upload组件是点开对话框后，按下确实就会上传，而且如果多选文件也会反复调用后端接口来完成上传。 因为项目需要，所以要实现手动上传，和一次性上传多个文件（调用一次后端接口） 在实现这个功能时，我翻阅了很多博客，可能是因为版本原因，很多代码都无用，最后还是通过翻阅官方文档，才最终实现。 ...
看一遍你就能学会，解决vue父组件调用子组件只执行一次方法问题
最新发布
总结前端开发中遇到的问题，分享前端知识
03-06 1325
父组件调用子组件方法，居然方法只执行一次，这是什么情况？这个方法简单有效，相信你看一遍就能学会。
ant design 预览图片_ant-design图片上传，更新dom的时候，上传动作被浏览器canceled...
weixin_39640417的博客
12-22 307
最近在做一个图片列表的需求，要求选择图片之后，自动上传到阿里云服务器，然后动态展示。由于图片列表要求有预览，编辑，删除，替换，重命名，以及拖拽换位的需求，所以说，仅仅是上传组件的图片预览功能是满足不了现有需求的，因此，在上传结束后，拿到返回的数组之后，要同步去更新dom，将新返回的数组渲染出来。但是，在测试过程中发现，当同时选择多张图片进行上传的时候，会出现一部分图片莫名其妙丢失的情况。由于图片的...
vue解决父组件调用子组件传值只执行一次问题
qq_43653355的博客
04-04 3421
解决方法： 给子组件加上一个key值 ：key="timer" 在data中加上timer timer：' ' 刷新子组件传的值的话在方法中加上 this.timer = new Date().getTime()
antd Upload onchange
05-11
antd的Upload组件提供了onChange事件用于监听文件上传状态的变化，具体使用方法如下： 1. 在Upload组件中添加onChange属性，并绑定一个回调函数。 ```jsx <Upload onChange={handleUpload}> <Button icon={<UploadOutlined />}>上传文件</Button> </Upload> ``` 2. 在回调函数中可以获取到上传文件的状态信息，例如上传进度、上传成功或失败等。 ```jsx const handleUpload = (info) => { console.log(info.fileList); console.log(info.file); console.log(info.event); } ``` 其中，info.fileList是上传文件列表，info.file是当前上传的文件信息，info.event是上传事件对象。可以根据实际需求来处理这些信息。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值