快捷導(dǎo)航

vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新

更新時(shí)間：2019年11月14日 09:42:24 作者：lilongwei4321

今天小編就為大家分享一篇vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1、vue圖片上傳，使用element UI 上傳組件自己寫

<el-upload
  action="string"
  :http-request="uploadImg"
  :show-file-list="false">
  <el-button v-perm="'b:img:upload'" size="small" type="primary">點(diǎn)擊上傳</el-button>
</el-upload>
<div class="imgStyle mar_top10">
  <img width="100%" :src="dialogImageUrl" alt="">
</div>

2、上傳圖片，并實(shí)時(shí)更新修改過(guò)后的圖片

method : {
  uploadImg(item) {
   var isFlag = (item.file.type == 'image/jpeg' || item.file.type == 'image/png')? true : false;
   if(!isFlag){
    this.$message({
     type: 'warning',
     message: '上傳圖片只能是 JPG、PNG 格式!'
    })
    return false
   }
   let formData = new FormData();
   formData.append('file', item.file);//若查看可使用 formData.get('file')
   api.updateShareBack(formData).then(res => {
    var res = res.data;
    if(res.code == 200){
     this.$message({
      type: 'success',
      message: '上傳成功'
     })
     this.dialogImageUrl = res.data + '?' + new Date().getTime();//new Date().getTime()使用時(shí)間戳更換每次的修改的圖片
    }
   })
  }
}

以上這篇vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue使用插槽實(shí)現(xiàn)高復(fù)用組件
在現(xiàn)代前端開發(fā)中,組件化開發(fā)已經(jīng)成為主流,其中?Vue.js?的插槽（slots）特性為我們構(gòu)建靈活、可復(fù)用的組件提供了強(qiáng)有力的支持,下面我們就來(lái)看看Vue如何通過(guò)插槽實(shí)現(xiàn)高復(fù)用組件吧
2024-11-11
如何在JS文件中獲取Vue組件
這篇文章主要介紹了如何在JS文件中獲取Vue組件，幫助大家更好的理解和學(xué)習(xí)前端知識(shí)，感興趣的朋友可以了解下
2020-09-09
Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹
這篇文章主要介紹了Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
在Vue里如何把網(wǎng)頁(yè)的數(shù)據(jù)導(dǎo)出到Excel的方法
這篇文章主要介紹了在Vue里如何把網(wǎng)頁(yè)的數(shù)據(jù)導(dǎo)出到Excel，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
vue深拷貝的三種實(shí)現(xiàn)方式示例詳解
vue深拷貝的三種實(shí)現(xiàn)方式：1、通過(guò)遞歸方式實(shí)現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實(shí)現(xiàn)深拷貝,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2023-11-11
vue3 $attrs和inheritAttrs的用法說(shuō)明
這篇文章主要介紹了vue3 $attrs和inheritAttrs的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue父組件值變化但子組件不刷新的三種解決方案
父組件傳遞給子組件的數(shù)據(jù),如果是一個(gè)復(fù)雜對(duì)象（例如一個(gè)數(shù)組或?qū)ο螅?那么子組件只會(huì)監(jiān)聽對(duì)象的引用而不是對(duì)象的內(nèi)容,這意味著當(dāng)對(duì)象的內(nèi)容發(fā)生變化時(shí),子組件不會(huì)更新,本文給大家介紹了vue子組件不刷新的三種解決方案,需要的朋友可以參考下
2024-03-03
基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼
這篇文章主要介紹了基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue3中自定義事件總線的實(shí)現(xiàn)代碼
隨著 Vue 3 的發(fā)布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再適用或有所變化,為了應(yīng)對(duì)這種變化,我們可以選擇在 Vue 3 應(yīng)用中實(shí)現(xiàn)自定義的“事件總線”機(jī)制,所以本文給大家介紹了Vue3中如何自定義消息總線,需要的朋友可以參考下
2024-05-05
vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue3+element 分片上傳與下載相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2023-06-06