怎么在vue2.0中使用upload組件預(yù)覽圖片
怎么在vue2.0中使用upload組件預(yù)覽圖片？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。
我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、定興ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的定興網(wǎng)站制作公司
1、首先我們?cè)赾li中引入element-ui
2、然后在具體的代碼中放入uoload組件
點(diǎn)擊上傳
只能上傳jpg/png文件，且不超過(guò)500kb
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);
}
}
});
}看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
當(dāng)前名稱：怎么在vue2.0中使用upload組件預(yù)覽圖片
文章起源：
http://weahome.cn/article/ihiodp.html
重慶分公司
重慶分公司
