ant design vue 清空upload組件圖片緩存的問題
ant design vue 清空upload組件圖片緩存
借鑒ant react的做法
在upload 組件外加一個key 賦隨機(jī)值,即可清除緩存
完整代碼
通過監(jiān)聽彈窗modal 的開閉狀態(tài) 更改key的值,建議關(guān)閉狀態(tài)時更改為隨機(jī)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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項目中頁面底部出現(xiàn)白邊及空白區(qū)域錯誤的問題
這篇文章主要介紹了vue項目中頁面底部出現(xiàn)白邊及空白區(qū)域錯誤的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08electron+vue實現(xiàn)div contenteditable截圖功能
這篇文章主要介紹了electron+vue實現(xiàn)div contenteditable截圖功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01typescript+vite項目配置別名的方法實現(xiàn)
我們?yōu)榱耸÷匀唛L的路徑,經(jīng)常喜歡配置路徑別名,本文主要介紹了typescript+vite項目配置別名的方法實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07vue中使用animate.css實現(xiàn)炫酷動畫效果
這篇文章主要介紹了vue中使用animate.css實現(xiàn)動畫效果,我們使用它,只需要寫很少的代碼,就可以實現(xiàn)非常炫酷的動畫效果,感興趣的朋友跟隨小編一起看看吧2022-04-04VUE中使用TypeScript裝飾器實現(xiàn)表單驗證的全過程
這篇文章主要給大家介紹了關(guān)于如何在VUE中使用TypeScript裝飾器實現(xiàn)表單驗證的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03