Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
最近有使用vue+elementUI實(shí)現(xiàn)多圖片上傳的需求，遂做此紀(jì)錄。
本次主要寫一下前端的實(shí)現(xiàn)細(xì)節(jié)，至于后臺(tái)以Multipart[ ]數(shù)組接收即可，不再贅述，網(wǎng)上一搜大把文章可供參考。
本次使用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)！??！
上傳成功后怎么回顯呢？
我們知道上傳成功后后臺(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中使用matomo進(jìn)行訪問流量統(tǒng)計(jì)的實(shí)現(xiàn)
這篇文章主要介紹了Vue中使用matomo進(jìn)行訪問流量統(tǒng)計(jì)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue2.0使用swiper組件實(shí)現(xiàn)輪播效果
這篇文章主要為大家詳細(xì)介紹了vue2.0使用swiper組件實(shí)現(xiàn)輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
詳解HTTP4種方法(GET、POST、 PUT和DELETE)
本文介紹了HTTP協(xié)議中的四種方法：GET、POST、PUT和DELETE,分別用于不同的操作,GET用于獲取數(shù)據(jù),POST用于提交數(shù)據(jù),PUT用于創(chuàng)建或更新資源,DELETE用于刪除資源,每種方法都有其特點(diǎn)和適用場(chǎng)景,了解這些方法有助于更好地進(jìn)行數(shù)據(jù)交互和開發(fā),感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了vue如何將字符串變?yōu)閿?shù)組問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue 組件中使用 transition 和 transition-group實(shí)現(xiàn)過渡動(dòng)畫
本文給大家分享一下vue 組件中使用 transition 和 transition-group 設(shè)置過渡動(dòng)畫,總結(jié)來說可分為分為 name 版, js 鉤子操作類名版, js 鉤子操作行內(nèi)樣式版，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-07-07
vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法
這篇文章主要介紹了vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
VueX瀏覽器刷新如何實(shí)現(xiàn)保存數(shù)據(jù)
這篇文章主要介紹了VueX瀏覽器刷新如何實(shí)現(xiàn)保存數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue3網(wǎng)站首頁(yè)布局開發(fā)，上篇文章已經(jīng)提到集成Ant Design Vue后，和Element Ui一樣，還是組件的使用，接下倆我們就來看看Vue3網(wǎng)站首頁(yè)布局開發(fā)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10
這篇文章主要為大家介紹了如何利用Vue實(shí)現(xiàn)一個(gè)樹形穿梭框，elementUI和ant-d組件庫(kù)的穿梭框組件效果都不是很好，所以本文將利用一個(gè)新的插件來實(shí)現(xiàn)，需要的可以參考一下2022-04-04
Vue寫一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能
這篇文章主要介紹了基于Vue寫一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能，在項(xiàng)目開發(fā)的過程，經(jīng)常會(huì)遇到發(fā)送驗(yàn)證碼，點(diǎn)擊之后有60秒倒計(jì)時(shí)的按鈕，今天小編就給大家分享實(shí)例代碼，需要的朋友參考下吧2018-04-04