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