這篇文章給大家介紹怎么在vue中使用elementUi上傳圖片，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

10年積累的成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有根河免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

上傳組件封裝需求分析

在基于elementUI庫(kù)做的商城后臺(tái)管理中，需求最大的是商品管理表單這塊，因?yàn)樾枰浫敫鞣N各樣的商品圖片信息。加上后臺(tái)要求要傳遞小于2M的圖片，因此封裝了一個(gè)upload.vue組件作為上傳頁(yè)面的子組件，它用于管理圖片上傳邏輯。

upload.vue解析

upload主要用于實(shí)現(xiàn)表單上傳圖片的需求，主要由input +img 構(gòu)成當(dāng)沒(méi)有圖片的時(shí)候顯示默認(rèn)圖片，有圖片則顯示上傳圖片，因?yàn)閕nput樣式不太符合需求所以只是將起設(shè)置為不可見(jiàn)，不能將其設(shè)置為display:none。否則將將無(wú)法觸發(fā)input的change事件

upload.vue代碼如下:

/*
 這里是默認(rèn)的設(shè)置圖片的尺寸。可以通過(guò)父組件傳值將其覆蓋
*/
.upload-box {
 position: relative;
 height: 100px;
 width: 100px;
 overflow: hidden;
}

.upload-box img {
 width: 100%;
 height: 100%;
}

.upload-box .upload-input {
 position: absolute;
 left: 0;
 opacity: 0;
 width: 100%;
 height: 100%;
}

商品頁(yè)中使用upload組件

在good.vue中我們引入upload組件。并且傳遞相應(yīng)表單對(duì)象，需上傳的圖片類型的屬性，以及圖片顯示樣式給子組件

good.vue核心代碼:

關(guān)于怎么在vue中使用elementUi上傳圖片就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。