antdesignvue清空upload组件图片缓存的问题
目录
ant design vue 清空upload组件图片缓存
借鉴ant react的做法
a-upload 上传文件，无法清空缓存和页面的显示
ant design vue 清空upload组件图片缓存
在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,就可以了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
相关文章
Obelia
2020-05-28
Lewa
2020-05-24
Xenia
2023-05-12
Psyche
2023-05-12
Levana
2023-05-13
Faith
2023-05-13
Grace
2023-05-13
Tricia
2023-06-24
Fawn
2023-07-17
Kamaria
2023-07-20
Thadea
2023-07-20
Ipo
2023-07-20
Winona
2023-07-20
Kalika
2023-07-20
Orianna
2023-07-20
Peony
2023-07-20
Penelope
2023-07-20