vue2.0 使用element-ui里的upload組件實現(xiàn)圖片預覽效果方法
更新時間：2018年09月04日 15:16:44 作者：道小升--erPang
今天小編就為大家分享一篇vue2.0 使用element-ui里的upload組件實現(xiàn)圖片預覽效果方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1、首先我們在cli中引入element-ui
2、然后在具體的代碼中放入uoload組件
<el-upload class="upload-demo" action="" :auto-upload='false' :on-change='changeUpload'> <el-button size="small" type="primary">點擊上傳</el-button> <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div> </el-upload>
3、使用element-ui的upload組件中提供的接口：on-change回調函數(shù),然后在回調函數(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);
}
}
});
}
這個代碼的主要意思就是：當這個回調函數(shù)執(zhí)行,我們就獲取到組件自添加的元素el-upload-list的子元素,然后遍歷子元素,給組件自添加的元素自添加的元素el-upload-list的子元素a添加我們自己使用JS創(chuàng)建的一個imgElement,這樣我們就可以看到我們的圖片顯示在組件的下方了,雖然有點丑,但是沒關系,我們?yōu)閕mgElement添加上css樣式不就行了嘛！
以上這篇vue2.0 使用element-ui里的upload組件實現(xiàn)圖片預覽效果方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue下拉列表功能實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
window.onresize在vue中只能使用一次,自適應resize報錯問題
這篇文章主要介紹了window.onresize在vue中只能使用一次,自適應resize報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在vue中如果把所有的代碼都寫到一個頁面中,有時比較難找,顯得比較復雜,下面這篇文章主要給大家介紹了關于VUE項目中引入JS文件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
使用Vue.js實現(xiàn)數(shù)據(jù)的雙向綁定
在Vue.js中，雙向數(shù)據(jù)綁定是一項非常強大的功能，它能夠使數(shù)據(jù)和視圖之間保持同步，讓開發(fā)者更加方便地操作數(shù)據(jù)，在本文中，我們將介紹如何用Vue.js實現(xiàn)數(shù)據(jù)的雙向綁定,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中向data添加新屬性的三種方式小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue ssr服務端渲染(小白解惑)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
uniapp?vue3中使用webview在微信小程序實現(xiàn)雙向通訊功能
微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進行開發(fā)實現(xiàn)需求,這篇文章主要給大家介紹了關于uniapp?vue3中使用webview在微信小程序實現(xiàn)雙向通訊功能的相關資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue中定義的data為什么是函數(shù),vue中已經幫我們控制臺輸出警告，并且不會讓組件中的data合并到options中去，那么，很友好的處理了開發(fā)者的強行將data寫成對象的可能性，需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關于如何利用Vue實現(xiàn)簡易播放器的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
下面小編就為大家分享一篇在Vue組件上動態(tài)添加和刪除屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02