最近有使用vue+elementUI實現多圖片上傳的需求，遂做此紀錄。
本次主要寫一下前端的實現細節，至於後臺以Multipart[ ]陣列接收即可，不再贅述，網上一搜大把文章可供參考。
本次使用elementui的上傳圖片控制元件的照片牆型別，其使用示例可具體檢視官方文件

Elementui 多圖上傳控制元件

需要注意的是，官方文件中的示例採用自動上傳的方式，大多數情況我們是需要點選上傳按鈕或和表單一起提交才開始上傳的（即手動上傳），此時官方的示例就不滿足我們的需求了。怎麼辦？當然是自己動手豐衣足食啦！！！
進入正題實現後以及上傳儲存成功後的效果如圖

實現程式碼

這裡有幾個屬性需要注意一下（敲黑板！！！）

因為本次採用手動上傳所以需要把action屬性置為空，上傳的url我們在點選確定時再傳給控制元件的方法
multiple：表示支援多圖上傳
auto-upload：表示自動上傳此處需要設定為“true”(原因下面重點講)
accept表示允許上傳的圖片字尾（填寫好後點擊選擇圖片的按鈕時，瀏覽器會過濾掉不屬於這些字尾的圖片。如需要多個值用“，”隔開）
list-type：圖片顯示樣式，可以參考官方文件
file-list:圖片回顯的檔案列表
before-upload:上傳前執行的方法，可以在這裡檢查圖片的型別、大小等
http-request:該方法會攜帶一個content引數使用其屬性content.file

接下來說為什麼要手動上傳還要將”auto-upload“設定為true。
要想上述的before-upload、on-exchange、on-remove等關鍵方法生效需要把”auto-upload“

選好了要上傳的圖片點選上傳是不是就ok了？試了一下發現不行，why?我們在選擇圖片時觸發的on-change方法中列印file引數

通過打印發現file引數並不是我們真正想要的物件，仔細觀察會看到file物件中還有一個raw物件，此時眼前一亮，這才是我們想要的
筆者的採用的方法是在上傳的方法中去遍歷上傳列表拿到每個物件中的raw物件，然後將拿到的raw物件組成的list傳到後臺去儲存（別忘了Format物件）

如果有其他更好的獲取方法還希望多多指點！！！
上傳成功後怎麼回顯呢？
我們知道上傳成功後後臺會將圖片的url返回給我們。我是這麼做：把後臺但會的url集合再轉成file的集合

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

總結

到此這篇關於Vue+elementUI實現多圖片上傳與回顯功能（含回顯後繼續上傳或刪除）的文章就介紹到這了,更多相關vue elementUI多圖片上傳 回顯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！