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

曾经终败给现在 2021-09-24 08:22 1207阅读 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 条评论，1207人围观）

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

相关阅读

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

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

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

相关清空数组的方法

直接置空堆内存中的值其实没变。 var b = [1, 2, 3, 4]; var a = b; a = [];

刺骨的言语ヽ痛彻心扉/ 2024年03月17日 23:39/ 0 赞/ 67 阅读

相关 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 赞/ 3 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3

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