antdesign for vue（antdesignvue清空upload组件图片缓存的问题）
导读：ant design vue 清空upload组件图片缓存 借鉴ant react的做法...
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,就可以了
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！