Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。

React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。

作者头像
朱季谦
发布于 2019-10-15 07:46:10
发布于 2019-10-15 07:46:10
5.4K0
举报

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

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

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

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-10-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
大文件上传原理及实现方案
在网络应用中,大文件上传是一个技术挑战。本文详细解析了大文件上传的核心原理,并探讨了多种实现方案。从基本的文件分割、断点续传到复杂的并行上传,文章涵盖了一系列技术细节和最佳实践,包括如何处理网络波动、提高数据传输效率等关键问题。此外,还介绍了相关的前端和后端技术支持。无论是开发者还是架构师,这篇文章都将提供有力的技术指导和实战参考,帮助读者高效解决大文件上传问题。
京东技术
2024/02/27
2.9K0
大文件上传原理及实现方案
【php详细笔记】上传文件到服务器
QQ空间里面上传图片呀 微信朋友圈上传图片 发邮件里面上传邮件资料附件 认证的时候要求上传照片或身份证 还有各种产品汪(gou)们提出的需求来分析,上传不同的东西。
20岁爱吃必胜客
2022/11/13
9.8K0
【php详细笔记】上传文件到服务器
React组件设计实践总结02 - 组件的组织
一个复杂的应用都是由简单的应用发展而来的, 随着越来越多的功能加入项目, 代码就会变得越来越难以控制. 本文章主要探讨在大型项目中如何对组件进行组织, 让项目具备可维护性.
_sx_
2019/08/07
2K0
React组件设计实践总结02 - 组件的组织
精通React/Vue系列之实现一个全局提示(Message)组件
本文是笔者写组件设计的第十一篇文章, 今天带大家实现一个同样比较特殊的组件——全局提示(Message)组件。我们看到的组件效果可能是这样的:
徐小夕
2020/02/26
3.8K0
JavaWeb20-文件上传;下载(Java真正的全栈开发)
文件上传&下载一.文件上传 1. 文件上传介绍 要将客户端(浏览器)大数据存储到服务器端,不将数据直接存储到数据库中,而是要将数据存储到服务器所在的磁盘上,这就要使用文件上传。 作用:减少了数据库服务器的压力,对数据的操作更加灵活 2. 文件上传原理分析 所谓的文件上传就是服务器端通过request对象获取输入流,将浏览器端上传的数据读取出来,保存到服务器端 浏览器端操作 1.请求方式必须是post 2.使用<input type=’file’ name=’xxx’>,必须有name属性且有值 3.表单
Java帮帮
2018/03/19
1K0
JavaWeb20-文件上传;下载(Java真正的全栈开发)
基于react/vue搭建一个通用的表单管理配置平台
熟悉我的朋友可能会知道,我一向是不写热点的。为什么不写呢?是因为我不关注热点吗?其实也不是。有些事件我还是很关注的,也确实有不少想法和观点。但我一直奉行一个原则,就是:要做有生命力的内容。
徐小夕
2020/05/08
1.4K0
基于react/vue搭建一个通用的表单管理配置平台
【总结】1941- 上传、下载终极解决方案:切片!!!
在前端开发中,文件流操作是指通过数据流的方式处理文件,对文件进行读取、写入和展示等操作。下面详细介绍了前端文件流操作的几个基本概念和技术。
pingan8787
2024/02/06
4740
【总结】1941- 上传、下载终极解决方案:切片!!!
大文件分片上传和分片下载
大家好,我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder
前端柒八九
2024/07/02
5790
大文件分片上传和分片下载
beeshell:开源的 React Native 组件库
beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 Native 代码),涉及前端(FE)、iOS、Android 三端技术,兼顾通用性和定制化,支持自定义主题,用于开发和服务企业级移动应用。现在已经在 GitHub 上开源,地址为:https://github.com/meituan/beeshell。
美团技术团队
2019/03/22
1.9K0
beeshell:开源的 React Native 组件库
React 折腾记 - (6) 基于React 16.6 + Antd 3.10.7封装的一个声明式的查询组件
根据ctype渲染的控件有Input,Button,Select,DatePicker,Cascader,Radio
CRPER
2018/12/12
2.7K0
写给新手前端的各种文件上传攻略,从小图片到大文件断点续传
今年国庆假期终于可以憋在家里了不用出门了,不用出去看后脑了,真的是一种享受。这么好的光阴怎么浪费,睡觉、吃饭、打豆豆这怎么可能(耍多了也烦),完全不符合我们程序员的作风,赶紧起来把文章写完。
coder_koala
2019/11/04
3.3K0
写给新手前端的各种文件上传攻略,从小图片到大文件断点续传
2年vue项目实战经验汇总
vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(electronjs)等也有广泛的应用,与此诞生的优秀的开源框架比如elementUI,iView, ant-design-vue等也极大的降低了开发者的开发成本,并极大的提高了开发效率。笔者最初接触vue时也是使用的iview框架,亲自体会之后确实非常易用且强大。
徐小夕
2020/02/19
1.7K0
vue项目实战精粹汇总
vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(electronjs)等也有广泛的应用,与此诞生的优秀的开源框架比如elementUI,iView, ant-design-vue等也极大的降低了开发者的开发成本,并极大的提高了开发效率。笔者最初接触vue时也是使用的iview框架,亲自体会之后确实非常易用且强大。
徐小夕
2022/04/06
1.7K0
vue项目实战精粹汇总
《精通react/vue组件设计》之手把手实现一个轻量级可扩展的模态框(Modal)组件
本文是笔者写组件设计的第九篇文章, 今天带大家实现一个轻量级且可灵活配置组合的模态框(Modal)组件, 该组件在诸如Antd或者elementUI等第三方组件库中都会出现,主要用来提供系统的用户反馈.
徐小夕
2020/02/19
2.8K0
《精通react/vue组件设计》之手把手实现一个轻量级可扩展的模态框(Modal)组件
前端二面必会面试题及答案_2023-03-15
translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)。⽽改变绝对定位会触发重新布局,进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层,但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效,可以缩短平滑动画的绘制时间。 ⽽translate改变位置时,元素依然会占据其原始空间,绝对定位就不会发⽣这种情况。
jsisbset
2023/03/15
1.4K0
开源React Native组件库beeshell 2.0发布
2018年,我们开源了React Native组件库——beeshell 1.0。时隔一年,我们对React Native组件库继续优化,实现beeshell 2.0升级,开源38个功能。希望更好的服务社区,同时也希望利用社区力量丰富React Native组件库。
美团技术团队
2019/09/29
7980
开源React Native组件库beeshell 2.0发布
落魄前端,整理给自己的前端知识体系复习大纲(下篇)
也许内容并不深入,因为文章的标题与定义就是大纲,并没指望一篇文章,可以教会提到的对应的知识点。无论哪个知识点,一个原型链最基础的东西,都可进行深挖,大神都可以扯上几万字,也未必能让所有人看懂,培训机构上万的学费,也未必敢说一句包你懂,何况笔者只是一个免费的大纲汇总呢?本文仅是大纲而已。大家哪个知识点不熟悉,应该学会自己查漏补缺,自己学习着去深入。
用户8671053
2021/09/19
5930
ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件
  从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了一个和之前类似的文件选择上传的需求,不过这次是需要手动点击按钮把文件上传到服务器中进行数据导入,而且最多只能够选择一个文件进行上传,上传成功后需要对file-list中的文件列表数据进行清空操作,在这里服务端使用的是ASP.NET Core WEB API来进行文件流数据接收和保存。
追逐时光者
2020/04/16
2.6K0
React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)
根据ctype渲染的控件有Input,Button,Select,DatePicker,Cascader,Radio
CRPER
2024/02/06
2670
React 16.x折腾记 - (6)  基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)
JeecgBoot 2.4 微服务正式版发布,基于SpringBoot的低代码平台
项目介绍 JeecgBoot 是一款基于代码生成器的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shiro,JWT 支持微服务。强大的代码生成器让前后端代码一键生成,实现低代码开发! JeecgBoot 引领新的低代码开发模式(OnlineCoding-> 代码生成-> 手工MERGE), 帮助解决Java项目70%的重复工作,让开发更多关注业务。既能快速提高效率,节省研发成本,同时又不失灵活性! 当前版本:v2.4
JEECG
2021/01/21
3.1K0
推荐阅读
相关推荐
大文件上传原理及实现方案
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档