您好,登錄后才能下訂單哦!
1、vue圖片上傳,使用element UI 上傳組件自己寫(xiě)
<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è)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。