快捷導(dǎo)航

Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）

更新時(shí)間：2020年03月23日 14:56:03 作者：許愿瓶1

這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近有使用vue+elementUI實(shí)現(xiàn)多圖片上傳的需求，遂做此紀(jì)錄。
本次主要寫一下前端的實(shí)現(xiàn)細(xì)節(jié)，至于后臺(tái)以Multipart[ ]數(shù)組接收即可，不再贅述，網(wǎng)上一搜大把文章可供參考。
本次使用elementui的上傳圖片控件的照片墻類型，其使用示例可具體查看官方文檔

Elementui 多圖上傳控件

需要注意的是，官方文檔中的示例采用自動(dòng)上傳的方式，大多數(shù)情況我們是需要點(diǎn)擊上傳按鈕或和表單一起提交才開始上傳的（即手動(dòng)上傳），此時(shí)官方的示例就不滿足我們的需求了。怎么辦？當(dāng)然是自己動(dòng)手豐衣足食啦?。?！
進(jìn)入正題實(shí)現(xiàn)后以及上傳保存成功后的效果如圖

在這里插入圖片描述

實(shí)現(xiàn)代碼

在這里插入圖片描述

這里有幾個(gè)屬性需要注意一下（敲黑板?。。。?/p>

因?yàn)楸敬尾捎檬謩?dòng)上傳所以需要把action屬性置為空，上傳的url我們?cè)邳c(diǎn)擊確定時(shí)再傳給控件的方法
multiple：表示支持多圖上傳
auto-upload：表示自動(dòng)上傳此處需要設(shè)置為“true”(原因下面重點(diǎn)講)
accept表示允許上傳的圖片后綴（填寫好后點(diǎn)擊選擇圖片的按鈕時(shí)，瀏覽器會(huì)過濾掉不屬于這些后綴的圖片。如需要多個(gè)值用“，”隔開）
list-type：圖片顯示樣式，可以參考官方文檔
file-list:圖片回顯的文件列表
before-upload:上傳前執(zhí)行的方法，可以在這里檢查圖片的類型、大小等
http-request:該方法會(huì)攜帶一個(gè)content參數(shù)使用其屬性content.file可以獲取到將要上傳的文件對(duì)象
on-preview:觸發(fā)圖片預(yù)覽時(shí)的方法
on-exchange:圖片列表更改時(shí)觸發(fā)的方法，該方法攜帶（file,fileList）兩個(gè)參數(shù)，file表示剛剛新增到圖片列表的文件，fileList表示此時(shí)的文件列表
on-remove:表示刪除圖片時(shí)觸發(fā)的方法同樣攜帶（file,fileList）兩個(gè)參數(shù)
on-exceed：方法表示上傳的列表長(zhǎng)度超過限制時(shí)觸發(fā)的方法，前提是設(shè)置的limit屬性，該屬性接收Number類型

接下來說為什么要手動(dòng)上傳還要將”auto-upload“設(shè)置為true。
要想上述的before-upload、on-exchange、on-remove等關(guān)鍵方法生效需要把”auto-upload“設(shè)置為true

選好了要上傳的圖片點(diǎn)擊上傳是不是就ok了？試了一下發(fā)現(xiàn)不行，why?我們?cè)谶x擇圖片時(shí)觸發(fā)的on-change方法中打印file參數(shù)

在這里插入圖片描述

通過打印發(fā)現(xiàn)file參數(shù)并不是我們真正想要的對(duì)象，仔細(xì)觀察會(huì)看到file對(duì)象中還有一個(gè)raw對(duì)象，此時(shí)眼前一亮，這才是我們想要的
筆者的采用的方法是在上傳的方法中去遍歷上傳列表拿到每個(gè)對(duì)象中的raw對(duì)象，然后將拿到的raw對(duì)象組成的list傳到后臺(tái)去保存（別忘了Format對(duì)象）

在這里插入圖片描述

如果有其他更好的獲取方法還希望多多指點(diǎn)?。。?br /> 上傳成功后怎么回顯呢？
我們知道上傳成功后后臺(tái)會(huì)將圖片的url返回給我們。我是這么做：把后臺(tái)但會(huì)的url集合再轉(zhuǎn)成file的集合

在這里插入圖片描述

其中this.form.images即為url的集合
這樣就可以成功回顯了，還可以繼續(xù)在上傳后的列表再次上傳或刪除已上傳的圖片
注意：已經(jīng)上傳了的圖片已經(jīng)不可以再次提交到后臺(tái)再次上傳，這個(gè)時(shí)候就需要你將已上傳的圖片過濾掉再上傳，可以在上傳的時(shí)候判斷圖片的url中包不包含“blob”,如果包含則可以上傳，若不包含說明已經(jīng)上傳過了需要過濾掉，此外還需要保持上傳的順序

在這里插入圖片描述

總結(jié)

到此這篇關(guān)于Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）的文章就介紹到這了,更多相關(guān)vue elementUI多圖片上傳回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: