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