ant design vue 清空upload組件圖片緩存的問題

更新時(shí)間：2022年10月24日 10:06:26 作者：多纖果凍

這篇文章主要介紹了ant design vue 清空upload組件圖片緩存的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

ant design vue 清空upload組件圖片緩存

借鑒ant react的做法

在upload 組件外加一個(gè)key 賦隨機(jī)值，即可清除緩存

完整代碼

通過監(jiān)聽彈窗modal 的開閉狀態(tài) 更改key的值，建議關(guān)閉狀態(tài)時(shí)更改為隨機(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 上傳文件后，再次打開，頁面還是顯示上次上傳的文件，原因是本地組件緩存，添加個(gè)key,就可以了

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js中使用components組件的實(shí)例講解
這篇文章主要介紹了Vue.js中使用components組件的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue移動(dòng)端如何解決click事件延遲,封裝tap等事件
這篇文章主要介紹了vue移動(dòng)端如何解決click事件延遲，封裝tap等事件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
淺談vue單頁面中有多個(gè)echarts圖表時(shí)的公用代碼寫法
這篇文章主要介紹了淺談vue單頁面中有多個(gè)echarts圖表時(shí)的公用代碼寫法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
詳解Vue使用命令行搭建單頁面應(yīng)用
本篇文章主要介紹了詳解Vue使用命令行搭建單頁面應(yīng)用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
關(guān)于axios的proxy代理配置解析
這篇文章主要介紹了關(guān)于axios的proxy代理配置解析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作
這篇文章主要介紹了vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
修改vue源碼實(shí)現(xiàn)動(dòng)態(tài)路由緩存的方法
這篇文章主要介紹了修改vue源碼實(shí)現(xiàn)動(dòng)態(tài)路由緩存的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
vue3 微信掃碼登錄及獲取個(gè)人信息實(shí)現(xiàn)的三種方法
本文主要介紹了vue3 微信掃碼登錄及獲取個(gè)人信息實(shí)現(xiàn)的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03
Vue單頁面應(yīng)用中實(shí)現(xiàn)Markdown渲染
這篇文章主要介紹了Vue單頁面應(yīng)用中如何實(shí)現(xiàn)Markdown渲染，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2021-02-02
vue-router二級導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue-router二級導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07