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

更新时间：2022年10月24日 10:06:26 作者：多纤果冻

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

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

借鉴ant react的做法

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

完整代码

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

  <a-modal v-model="visible" title="AddComponents" @ok="handleOk">
        <a-form-model-item label="Image">
          <div :key="ImgKey">
            <imgUpload
              @uploadFileList="uploadFileList"
              model="moudleImg"
              :isOpen="isOpen"
              :file="fileList"
            ></imgUpload>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

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,就可以了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue实现自定义字段导出EXCEL的示例代码
这篇文章主要介绍了Vue实现自定义字段导出EXCEL的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
这篇文章主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
前端vue2使用国密SM4进行加密、解密具体方法
SM4是一种对称加密算法,类似于AES,主要用于数据的批量加密,如文件加密、数据库加密、网络通信数据加密等,这篇文章主要给大家介绍了关于前端vue2使用国密SM4进行加密、解密的相关资料,需要的朋友可以参考下
2024-07-07
vue中echarts视图不更新问题及解决
这篇文章主要介绍了vue中echarts视图不更新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue使用Vuex状态管理模式
这篇文章介绍了vue使用Vuex状态管理模式的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-04-04
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
这篇文章主要介绍了vue 导航菜单刷新状态不消失,显示对应的路由界面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
如何使用Nginx将前端Vue项目部署到云服务器
记录使用Nginx将纯前端的Vue3项目部署到阿里云服务器（Ubuntu 22.04）上,包含通过Nginx代理实现跨域请求、以及个人踩坑记录,感兴趣的朋友一起看看吧
2024-04-04
Vue 根据条件判断van-tab的显示方式
这篇文章主要介绍了Vue 根据条件判断van-tab的显示方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue3中如何使用SCSS编写样式
在Vue模板中启用这些表现力库插件的最简单方法是在初始化项目时安装它们,或使用 npm install（或 yarn add）安装包,这篇文章主要介绍了Vue3中如何使用SCSS编写样式,需要的朋友可以参考下
2023-12-12
element-UI el-table修改input值视图不更新问题
这篇文章主要介绍了element-UI el-table修改input值视图不更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02