最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除

经过一顿试错,终于解决了这个问题。

showUploadList,是可选参数,即是否展示uploadList,默认是开启的,showUploadList:true即为展示,效果是当附件上传成功后,会在页面上显示出上传的附件名字记录,如上图所示。

需要解决的问题是:在有上传按钮的弹出框里,当上传附件后,点击确定或者弹出框取消时,之后再打开弹出框,原来的附件缓存还在弹出框上,这个问题的解决方法很简单,只需要在Upload标签外层加一个带有随机key的div即可解决:

Math.random()获得的值是一个随机数,这样在每次打开弹窗的时候,Upload组件得到的key值就是唯一值了。

按照以上方法,即可以实现React+antd实现<Upload>组件上传附件后再次上传清除附件缓存的问题。

React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。的更多相关文章

  1. AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为

    本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 我在上一篇文章<AntD框架的upload组件上传图片时使用customRequest方法 ...

  2. 前端AntD框架的upload组件上传图片时遇到的一些坑

    前言 本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 前端做文件上传这个功能,是很有技术难度的.既然框架给我们提供好了,那就直接用呗.结果用的时 ...

  3. 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

    一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...

  4. 封装React AntD的dialog弹窗组件

    前一段时间分享了基于vue和element所封装的弹窗组件(封装Vue Element的dialog弹窗组件),今天就来分享一个基于react和antD所封装的弹窗组件,反正所使用的技术还是那个技术, ...

  5. 封装react antd的表格table组件

    封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能. 本次组件的封装采用了函数式组件即无状 ...

  6. 封装react antd的upload上传组件

    上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...

  7. 封装react antd的form表单组件

    form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...

  8. React + Antd开发模式下的Excel导入功能

    具体js如下,配合的是antd里面的upload组件,使用的是xlsx插件 npm :  npm install xlsx 插件链接: https://github.com/SheetJS/sheet ...

  9. React结合AntD的upload组件写头像上传

    upload组件里面action就是调upload接口,获取图片url地址 setImg获取url,点击保存传到后台   action 上传头像方法 //上传头像 changeImg = info = ...

随机推荐

  1. 关于dijkstra的优化 及 多源最短路

    先来看这样一道题目 给你N个点,M条双向边,要求求出1号点到其他所有点的距离.其中 2 <= N <= 1e5,  1 <=M <= 1e6. 对于这样的一道题目 我们当然不可 ...

  2. atcoder E - Jigsaw(思维)

    题目链接:http://agc017.contest.atcoder.jp/tasks/agc017_e 题解:这题很巧妙运用了cnt[i]抽象的表示了上下互补的状态,最后上面突出的一定要处理完.下面 ...

  3. codeforces 749D Leaving Auction(二分)

    题目链接:http://codeforces.com/problemset/problem/749/D 题意:就是类似竞拍,然后报价肯定要比上一个高,然后查询输入k个数表示那些人的竞拍无效, 输出最后 ...

  4. HTML连载35-背景图片的练习、精灵图

    一.背景图片练习 解释:这个例子需要注意的是,我们背景图片嵌套到另一个图片之中.我们设计的注意点在于,怎么定位到我们想定位到的地方. 总结:背景图片就是一块一块的,我们想把块的位置定位好(一般就是宽和 ...

  5. Patch

    http://www.cnblogs.com/cute/archive/2011/04/29/2033011.html zhezhelin diff和patch使用指南 diff和patch是一对工具 ...

  6. C#开发BIMFACE系列25 服务端API之获取模型数据10:获取楼层对应面积分区列表

    系列目录     [已更新最新开发文章,点击查看详细] 在<C#开发BIMFACE系列22 服务端API之获取模型数据7:获取多个模型的楼层信息>中,返回的楼层信息结果中包含了楼层的具体信 ...

  7. 数据库常用SQL语句(二):多表连接查询

    前面主要介绍了单表操作时的相关查询语句,接下来介绍一下多表之间的关系,这里主要是多表数据记录的查询,也就是如何在一个查询语句中显示多张表的数据,这也叫多表数据记录的连接查询. 在实现连接查询时,首先是 ...

  8. ajax交互案例

    数据交互是前端很重要的一部分,静态页是基础,而交互才是网页的精髓.交互又分为人机交互和前后端数据交互,现阶段的互联网下,大部分的网站都要进行前后端数据交互,如何交互呢?交互的流程大概就是前端发送数据给 ...

  9. Java中String为什么是不可变的

    1.在Java中,String类是不可变类,一个不可变类是一个简单的类,并且这个的实例也不能被修改, 这个类的实例创建的时候初始化所有的信息,并且这些信息不能够被修改 2.字符串常量池 字符串常量池是 ...

  10. PythonI/O进阶学习笔记_5.python的set和dict

    前言: 我一直觉得对我来说学习知识很忌讳不系统.本篇内容与上一篇 自定义序列类是有联系的. 上一篇比较通范的了解了序列类的一些协议和特性,并且有些list的内容.这篇更加具体到set和dict这两个序 ...