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

曾经终败给现在 2021-09-24 08:22 1216阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70][]

借鉴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)
        },
      },
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70]: /images/20210923/c4fa895583904e55a6b8586e18fe2817.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1216人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue】项目dialog组件数据项清空

目录一、重置myParams 二、this.$refs\["name"\].resetFields() 1、使用v-if 然后渲染, 无效 2、使用nextTick,

你的名字/ 2024年03月22日 13:12/ 0 赞/ 54 阅读

相关 vue项目中使用ant-design-vue中a-tabel组件

1，首先安装ant-design-vue：yarn add ant-design-vue 2，在main.js中引入： import Antd from 'ant-desi

深碍√TFBOYSˉ_/ 2023年07月13日 13:52/ 0 赞/ 15 阅读

相关 ant-design-vue 图片预览组件，支持旋转，放大缩小，下载

![bc1a7800f6566634494c762cb0d14280.png][] // 图片预览组件，支持旋转，放大缩小，下载 // 图片预览组件，支持旋转，放大

拼搏现实的明天。/ 2023年01月20日 09:59/ 0 赞/ 12 阅读

相关 Vue 中使用 Upload 组件上传图片

vue 中使用 Element 的 upload 组件上传 Excel，大致可以分两种情况 1. 使用 `action` 上传到服务器如下不讨论使用 a

朱雀/ 2023年01月16日 11:19/ 0 赞/ 240 阅读

相关 ant design pro重写tableAlertOptionRender清空所有选中

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

我不是女神ヾ/ 2022年12月23日 07:09/ 0 赞/ 148 阅读

相关 ant-design-vue upload组件onchange成功不回调

[官方文档地址][Link 1] 现象 Upload组件的onchange方法只有uploading状态会回调，上传成功和失败不会回调。官方给了很多解释，但是都是针

一时失言乱红尘/ 2022年12月21日 12:59/ 0 赞/ 152 阅读

相关 ant-design-vue表单from清空，设置值

ant-design-vue表单from取值 // 获取用户填写的值 this.form.validateFields((err, values) => {

素颜马尾好姑娘i/ 2022年12月06日 15:53/ 0 赞/ 197 阅读

相关 ant-design vue组件库使用后总结

1、form组件自定义校验 template: <a-form-item fieldDecoratorId="articleNum

川长思鸟来/ 2022年08月29日 10:24/ 0 赞/ 345 阅读

相关 ant-design vue组件库使用后总结

1、form组件自定义校验 template: <a-form-item fieldDecoratorId="articleNum

骑猪看日落/ 2022年01月26日 09:11/ 0 赞/ 324 阅读

相关 ant design vue 清空upload组件图片缓存的方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3

曾经终败给现在/ 2021年09月24日 08:22/ 0 赞/ 1217 阅读