ant design vue 清空upload组件图片缓存的问题【vue基础】

作者：min_xie_964 | 来源：互联网 | 2023-05-31 23:03

这篇文章主要介绍了ant design vue 清空upload组件图片缓存的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完

ant design vue 清空upload组件图片缓存

借鉴ant react的做法

在upload 组件外加一个key 赋随机值，即可清除缓存

完整代码

通过监听弹窗modal 的开闭状态更改key的值，建议关闭状态时更改为随机key ，避免影响操作效果

export default {
  data() {
    return {
      visible: false,
      ImgKey: ""
    }
  },
  watch: {
    visible() {
      if (this.visible) {
        this.ImgKey = ""
      } else {
        this.ImgKey = Math.random()
      }
      console.log("this.ImgKey :>> ", this.ImgKey)
    },
  },
}

a-upload 上传文件，无法清空缓存和页面的显示

ant design vue a-upload 上传文件后，再次打开，页面还是显示上次上传的文件，原因是本地组件缓存，添加个key,就可以了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程笔记。

推荐阅读

function
Vue3中setup函数的参数props和context配置详解

本文详细介绍了Vue3中setup函数的参数props和context的配置方法，包括props的接收和配置声明，以及未通过props进行接收配置时的输出值。同时还介绍了父组件传递给子组件的值和模板的相关内容。阅读本文后，读者将对Vue3中setup函数的参数props和context的配置有更深入的理解。 ... [详细]

蜡笔小新 2023-12-10 07:33:22
io
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

先看看ElementUI里关于el-table的template数据结构：<template><el-table:datatableData><e ... [详细]

蜡笔小新 2023-12-11 14:47:02
io
Vue项目中结合Element UI解决连续上传多张图片及图片编辑问题

本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果，并详细描述了自己的代码实现过程。 ... [详细]

蜡笔小新 2023-12-13 13:42:30
io
单页面应用 VS 多页面应用的区别和适用场景

本文主要介绍了单页面应用（SPA）和多页面应用（MPA）的区别和适用场景。单页面应用只有一个主页面，所有内容都包含在主页面中，页面切换快但需要做相关的调优；多页面应用有多个独立的页面，每个页面都要加载相关资源，页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]

蜡笔小新 2023-12-10 19:31:50
header
HashRouter 改为 Router 就全部空白页了。也不报错。

本文讨论了将HashRouter改为Router后，页面全部变为空白页且没有报错的问题。作者提到了在实际部署中需要在服务端进行配置以避免刷新404的问题，并分享了route/index.js中hash模式的配置。文章还提到了在vueJs项目中遇到过类似的问题。 ... [详细]

蜡笔小新 2023-12-09 10:26:51
header
Vue模拟数据,实现路由进入商品详情页面的示例

一、路由首先需要配置路由，就是点击good组件进入goodDetail组件配置路由如下{path:goodDetail,component:goodDetail}同时在good组件中写入如下点击事件，路由中加入 ... [详细]

蜡笔小新 2023-10-17 20:25:16
utf-8
Python3中选择文件对话框的格式打开和保存图片

本文介绍了在Python3中如何使用选择文件对话框的格式打开和保存图片的方法。通过使用tkinter库中的filedialog模块的asksaveasfilename和askopenfilename函数，可以方便地选择要打开或保存的图片文件，并进行相关操作。具体的代码示例和操作步骤也被提供。 ... [详细]

蜡笔小新 2023-12-14 17:46:55
io
C#学习教程：在Console中工作但在Windows窗体中不工作的异步代码分享

本文分享了一个关于在C#中使用异步代码的问题，作者在控制台中运行时代码正常工作，但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机，但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]

蜡笔小新 2023-12-14 15:56:00
utf-8
eclipse学习（第三章：ssh中的Hibernate）——11.Hibernate的缓存（2级缓存，get和load）

本文介绍了eclipse学习中的第三章内容，主要讲解了ssh中的Hibernate的缓存，包括2级缓存和get方法、load方法的区别。文章还涉及了项目实践和相关知识点的讲解。 ... [详细]

蜡笔小新 2023-12-14 00:31:35
main
C# 7.0 新特性：基于Tuple的“多”返回值方法

本文介绍了C# 7.0中基于Tuple的“多”返回值方法的使用。通过对C# 6.0及更早版本的做法进行回顾，提出了问题：如何使一个方法可返回多个返回值。然后详细介绍了C# 7.0中使用Tuple的写法，并给出了示例代码。最后，总结了该新特性的优点。 ... [详细]

蜡笔小新 2023-12-13 19:55:20
main
计算机网络初识及通信流程分析

本文介绍了计算机网络的定义和通信流程，包括客户端编译文件、二进制转换、三层路由设备等。同时，还介绍了计算机网络中常用的关键词，如MAC地址和IP地址。 ... [详细]

蜡笔小新 2023-12-13 16:50:29
io
开发笔记：解决播放框架内容安全策略设置不起作用的问题

本文介绍了作者在开发过程中遇到的问题，即播放框架内容安全策略设置不起作用的错误。作者通过使用编译时依赖注入的方式解决了这个问题，并分享了解决方案。文章详细描述了问题的出现情况、错误输出内容以及解决方案的具体步骤。如果你也遇到了类似的问题，本文可能对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-12-13 16:03:19
io
深入浅出Linux设备驱动编程的重要性与方法

本文介绍了深入浅出Linux设备驱动编程的重要性，以及两种加载和删除Linux内核模块的方法。通过一个内核模块的例子，展示了模块的编译和加载过程，并讨论了模块对内核大小的控制。深入理解Linux设备驱动编程对于开发者来说非常重要。 ... [详细]

蜡笔小新 2023-12-12 15:28:09
io
模板引擎StringTemplate的使用方法和特点

本文介绍了模板引擎StringTemplate的使用方法和特点，包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时，还介绍了StringTemplate语法中的属性和普通字符的使用方法，并提供了向模板填充属性的示例代码。 ... [详细]

蜡笔小新 2023-12-11 21:45:03
function
编写可保护的代码的重要性及优化方法

本文讨论了编写可保护的代码的重要性，包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法，如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道，如不规范的命名、重复代码、过长的函数和参数列表等。最后，介绍了如何处理数据泥团和进行函数重构，以提高代码质量和可维护性。 ... [详细]

蜡笔小新 2023-12-11 18:32:44

min_xie_964

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章

ant design vue 清空upload组件图片缓存的问题【vue基础】

目录

ant design vue 清空upload组件图片缓存

借鉴ant react的做法

a-upload 上传文件，无法清空缓存和页面的显示