ant design vue 清空upload組件圖片緩存的問題
更新時間：2022年10月24日 10:06:26 作者：多纖果凍
這篇文章主要介紹了ant design vue 清空upload組件圖片緩存的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
ant design vue 清空upload組件圖片緩存
借鑒ant react的做法
在upload 組件外加一個key 賦隨機值，即可清除緩存
完整代碼
通過監(jiān)聽彈窗modal 的開閉狀態(tài) 更改key的值，建議關閉狀態(tài)時更改為隨機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,就可以了
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue.js中使用components組件的實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue移動端如何解決click事件延遲，封裝tap等事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了淺談vue單頁面中有多個echarts圖表時的公用代碼寫法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了詳解Vue使用命令行搭建單頁面應用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了關于axios的proxy代理配置解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue移動端彈起蒙層滑動禁止底部滑動操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了修改vue源碼實現(xiàn)動態(tài)路由緩存的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法
本文主要介紹了vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
這篇文章主要介紹了Vue單頁面應用中如何實現(xiàn)Markdown渲染，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
vue-router二級導航切換路由及高亮顯示的實現(xiàn)方法
這篇文章主要給大家介紹了關于vue-router二級導航切換路由及高亮顯示的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07