解决antd upload onchange事件只触发一次的解决方法

最新推荐文章于 2024-06-06 18:11:26 发布
最新推荐文章于 2024-06-06 18:11:26 发布
阅读量1.5k 收藏
点赞数
文章标签： react.js javascript 前端 html Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63042378/article/details/128642141
版权

前提 antd：3.26.18 (大概上下的版本都有这个问题)

需求：需要upload组件只支持一个文件上传（限制文件上传数量）

问题:onchange时间只执行一次 且file.status一直都为uploading

解决办法：直接秒杀！！！！！

原因是在uploading的时期没有进行setState更新

也就是说 你的fileListg更新不能在状态的判断语句里面

像下面这样👇（不要关注fileUrl 那是做其他的配置的）

你需要把他挪到外面去

这样你才可以在file.status为任何值更新你的fileList的状态 避免出现问题

下面是upload的基本配置哦

第二帖 有问题欢迎留言交流~

爱吃鸭蛋的小鸭子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd Upload组件设置fileList后onChange只执行一次的解决办法
guxuehua的博客
09-09 9179
最近使用antd Upload组件后发现，当上传失败或者上传格式不正确，也会出现在列表中，想要控制显示列表，需要设置fileList， 设置后发现，onChange只执行一次且拿到的状态一直是uploading,即使服务器上传成功了也拿不到， 最后才发现uploading状态必须设置fileList不然，只执行一次，折腾半天，无语死了，以此记录一下 参考地址 ...
【antd 的Upload组件onChange方法只执行一次file.status===‘uploading‘，走不到‘done‘的原因和解决方法】
鸭绒的博客
09-23 2678
111
React Ant Design Upload一次上传多个文件
最新发布
luback的博客
06-06 239
阻止上传行为，设置为手动上传，手动上传时去做请求操作，请求需做特殊设置。核心关注点 ：请求的参数 和 请求方法的书写。uploadFilesContract请求方法。
input onchange 事件只执行一次的解决方法（获取图片url添加追加到图片列表）
wbj16116的博客
04-13 1665
（用普通方法，中能获取一次onchange事件，不能连续添加 图片 ） （input type=”file” name=”file” id=”Album_img” accept=”image/gif,image/jpeg,image/x-png”/） $('body').on('change','#Album_img',function(){ var formDat...
antd使用upload时onChange只执行一次
weixin_49662044的博客
08-21 389
react类式组件使用antd的upload时，onChange只执行一次。没有重新设置fileList的值。
Antd-Upload组件设置fileList属性时onChnage只执行到“uploading“状态引发的一些问题的解决方案
weixin_42159569的博客
12-14 2408
需求：文件上传失败时不需要回显。 思路：添加fileList属性，绑定一个列表，上传成功的文件才加入列表中 ... const [ displayFileList, setDisplayFileList ] = useState<any[]>([]); ... <Upload action="xxx" accept=".xls*, .csv" ... fileList={displayFileList} ... onChang.
antd Upload onChange 传参数
fred8的博客
08-10 2234
项目中再table 中添加Upload,Upload中onChange只能返回file参数，如果相对起添加其他参数方便处理可以用下面方法 onChange={(file) => this.handleUploadFileOnChange(file,record) <Form.Item key={index} required> {getFieldDecorator(`table[${record.key}].exampl
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
antd Upload 文件上传的示例代码
10-17
主要介绍了antd Upload 文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决Antd 里面的select 选择框联动触发的问题
01-22
触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被清空。 解决办法： 使用Select 里面的value属性，来进行清空 <Form style={{padding:'20px','boxSizing':'...
React+Antd+Redux实现待办事件的方法
10-17
主要介绍了React+Antd+Redux实现待办事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
antd组件Upload实现自己上传的实现示例
10-17
为了跟踪上传进度，你可以利用`xhr.upload.onprogress`事件，它会在文件上传过程中触发，传递一个包含当前进度百分比的事件对象。 以下是一个简化的`doTransferFile`函数，用于展示如何监听上传进度： ```jsx ...
在react中手搓一个antd的Upload文件上传组件
hello_helloworld的博客
07-17 286
在react中手搓一个antd的Upload文件上传组件，模仿antd的Upload进行实现，介绍了一些准备过程，具体的实现过程：input文件上传、onChange事件触发、具体的样式实现、动态生成以及在最后附上了源码。 使用了react+scss+ts+ant-design/icons
ant-design使用Upload组件时onchange回调函数没有获取到event
zhudingfengshen的博客
12-21 2778
import React, { useState, useEffect } from 'react'; import { LoadingOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons'; import { Upload, Button } from 'antd'; import type { UploadChangeParam } from 'antd/lib/upload'; import type { RcFile, Up
reactjs+ant design中upload上传组件的change事件只触发一次的问题。
weixin_44399994的博客
03-01 808
reactjs+ant design中upload上传组件的change事件只触发一次的问题。
antd之Input的onChange坑
热门推荐
陈强的博客
03-16 1万+
首先说一下需求，三个input框的值输入数字，想让其自动加减，然后复制给第四个输入框 很简单的一个例子，原本想用onChange结合getFieldValue来使用呢 却发现此onChange非彼onChange的 html代码 1 <Row type={'flex'} style={{ width: '100%' }} align="middle"&g...
【React工作记录八十一】ant design upload实现多个文件一次上传(全网首发)
geyaoisnice的博客
02-10 899
前端
vue编写评论功能时使用element-ui中upload多个文件一次性上传
qq_63503545的博客
11-18 593
多个文件一次性上传
el-upload上传多个文件，但是on-success只触发一次的问题解决
popmmian的博客
12-30 2199
el-upload组件多文件上传on-success只触发一次问题其他解决方案
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个

元

红包金额最低5元

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

抵扣说明：

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

余额充值