vue2.0 使用element-ui里的upload組件實(shí)現(xiàn)圖片預(yù)覽效果方法

更新時間：2018年09月04日 15:16:44 作者：道小升--erPang

今天小編就為大家分享一篇vue2.0 使用element-ui里的upload組件實(shí)現(xiàn)圖片預(yù)覽效果方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

1、首先我們在cli中引入element-ui

2、然后在具體的代碼中放入uoload組件

<el-upload class="upload-demo" action="" :auto-upload='false' :on-change='changeUpload'>
 <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
 <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>

3、使用element-ui的upload組件中提供的接口：on-change回調(diào)函數(shù),然后在回調(diào)函數(shù)中寫入如下代碼：

changeUpload: function(file, fileList) {
 this.fileList = fileList;
 this.$nextTick(
  () => {
  let upload_list_li = document.getElementsByClassName('el-upload-list')[0].children;
  for (let i = 0; i < upload_list_li.length; i++) {
  let li_a = upload_list_li[i];
  let imgElement = document.createElement("img");
  imgElement.setAttribute('src', fileList[i].url);
  imgElement.setAttribute('style', "max-width:50%;padding-left:25%");
  if (li_a.lastElementChild.nodeName !== 'IMG') { 
  li_a.appendChild(imgElement);
  } 
  }
  });
 }

這個代碼的主要意思就是：當(dāng)這個回調(diào)函數(shù)執(zhí)行,我們就獲取到組件自添加的元素el-upload-list的子元素,然后遍歷子元素,給組件自添加的元素自添加的元素el-upload-list的子元素a添加我們自己使用JS創(chuàng)建的一個imgElement,這樣我們就可以看到我們的圖片顯示在組件的下方了,雖然有點(diǎn)丑,但是沒關(guān)系,我們?yōu)閕mgElement添加上css樣式不就行了嘛！

以上這篇vue2.0 使用element-ui里的upload組件實(shí)現(xiàn)圖片預(yù)覽效果方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vuejs綁定class和style樣式
本文主要介紹了vue.js實(shí)現(xiàn)綁定class和style樣式的方法。具有很好的參考價值。下面跟著小編一起來看下吧
2017-04-04
vue3+ts數(shù)組去重方及reactive/ref響應(yīng)式顯示流程分析
這篇文章主要介紹了vue3+ts數(shù)組去重方法-reactive/ref響應(yīng)式顯示,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
使用vue點(diǎn)擊li,獲取當(dāng)前點(diǎn)擊li父輩元素的屬性值方法
今天小編就為大家分享一篇使用vue點(diǎn)擊li,獲取當(dāng)前點(diǎn)擊li父輩元素的屬性值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
八個Vue中常用的v指令詳解
vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面這篇文章主要給大家介紹了八個Vue中常用的v指令的相關(guān)資料,需要的朋友可以參考下
2022-04-04
Vue關(guān)于自定義事件的$event傳參問題
這篇文章主要介紹了Vue關(guān)于自定義事件的$event傳參問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
element-ui使用el-date-picker日期組件常見場景分析
最近一直在使用 element-ui中的日期組件,所以想對日期組件常用的做一個簡單的總結(jié),對element-ui el-date-picker日期組件使用場景分析感興趣的朋友一起看看吧
2024-05-05
一文帶你掌握Vue中的路由守衛(wèi)
路由守衛(wèi)（Route?Guards）是?Vue?Router?的一個功能,它允許我們在路由發(fā)生之前執(zhí)行邏輯判斷,這篇文章主要為大家介紹了Vue中路由守衛(wèi)的具體應(yīng)用,需要的可以了解下
2024-03-03
vue3.0實(shí)現(xiàn)復(fù)選框組件的封裝
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)復(fù)選框組件的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue首屏白屏問題的原因和解決方法講解
這篇文章主要介紹了Vue首屏白屏問題的原因和解決方法講解，Vue首屏白屏問題是指在頁面初次加載時，部分或全部內(nèi)容無法正常顯示，出現(xiàn)空白的情況。其原因可能是因?yàn)轫撁驿秩舅俣冗^慢，或者是因?yàn)榫W(wǎng)絡(luò)請求等問題導(dǎo)致數(shù)據(jù)無法及時加載
2023-05-05
nuxt.js中間件實(shí)現(xiàn)攔截權(quán)限判斷的方法
這篇文章主要介紹了nuxt.js中間件實(shí)現(xiàn)攔截權(quán)限判斷的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11