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

这篇具有很好参考价值的文章主要介绍了React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题,前端,react.js,缓存,前端

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

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

React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题,前端,react.js,缓存,前端

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

React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题,前端,react.js,缓存,前端

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

按照以上方法,即可以实现React+antd实现<Upload>组件上传附件后再次上传清除附件缓存的问题。文章来源地址https://www.toymoban.com/news/detail-759436.html

到了这里,关于React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • (实战-改bug)element ui Upload组件 上传一次后,再次点击上传 没反应

     今日修改bug时,上传组件点击上传,上传成功后,再次点击上传,没有反应,二次上传时http-request的方法没有进入。 原因是:第一次上传文件后,浏览器还保存着我们已经上传的文件,所以要想继续上传文件,就需要在on-success钩子函数中通过ref 拿到它的document元素进行清除

    2024年02月03日
    浏览(42)
  • React UI组件库——如何快速实现antd的按需引入和自定义主题

    大家上午好呀~ 今天来学习一下React的UI组件库以及antd的使用相关的知识点。 感兴趣的小伙伴可以给个三连哦~ material-ui(国外) ant-design(国内蚂蚁金服) antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。 安装antd组件库: 默认按需引入antd组件

    2024年02月02日
    浏览(37)
  • antd+Vue 3实现table行内upload文件图片上传【超详细图解】

    目录 一、背景 二、效果图 三、代码 一名被组长逼着干前端的苦逼后端,在一个晴天霹雳的日子,被要求前端订单产品实现上传产品图片并立刻回显图片。

    2024年04月11日
    浏览(45)
  • react结合antd的Table组件实现动态单元格合并

    首先看一下antd的Table表单组件,合并单元格,用到了rowSpan(合并行)和colSpan(合并列)  后台返回的数据 我们希望把category的值相同的,行合并成一个单元格 类似于这种  rowSpan这个属性可以指定合并行。例如说第一行,指定rowSpan为3,意思就是合并三行,则后面紧挨的两行的ro

    2024年02月12日
    浏览(42)
  • 【React】如何简单快速地修改antd组件UI内部样式如字体颜色

    最近刚开始学习react 在写一个登录的页面 发现组件的颜色不太合适,默认是黑色字体 那我想修改成白色字体以适应我的页面 运用多种css文件打包策略太过复杂 对我这种小白不友好 两行代码搞定 实现需求 通过:global加上!important 在Umi项目中,在global.less文件夹下面,通过roo

    2024年02月13日
    浏览(45)
  • vue element el-upload附件上传、在线预览、下载当前预览文件

    上传 在线预览(iframe): payload: response: 全部代码: 初版–01

    2024年02月14日
    浏览(55)
  • vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件

    效果如图 直接看代码吧 template部分 css部分 js部分

    2024年02月11日
    浏览(79)
  • el-form与el-upload结合上传带附件的表单数据(前端篇)

    本文前端采用Vue + element-plus技术栈,前端项目参考yudao-ui-admin-vue3项目与 Geeker-Admin项目。 这篇文章是el-form与el-upload结合上传带附件的表单数据(后端篇)-CSDN博客姐妹篇,后端篇文章主要讲的是后端的实现逻辑,前端篇稍微简单一些,其实最主要的就是封装el-upload组件,供具

    2024年01月22日
    浏览(42)
  • react使用antd的table组件,实现点击弹窗显示对应列的内容

    特别提醒:不能在table的columns的render里面设置弹窗组件渲染,因为这会导致弹窗显示的始终是最后一行的内容,因为这样渲染的结果是每一行都会重新渲染一遍这个弹窗并且会给传递一个content的值,渲染到最后一行的时候,就传递的是最后一行的值。这就导致你有多少行数据

    2024年02月12日
    浏览(38)
  • 使用el-upload组件实现递归多文件上传

    一、需求描述:在页面上点击按钮弹出选择电脑文件的界面,可以一次性选择多个文件一起上传到服务器上,并把上传成功的文件展示在页面上。 · 二、 问题阐述:el-upload是支持多文件上传的,但是是同步进行的,你点击上传按钮,选择了多个文件后点击确定,会同时调用

    2023年04月08日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包