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

振興網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),振興網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為振興成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的振興做網(wǎng)站的公司定做！

Elementui 多圖上傳控件

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

實現(xiàn)代碼

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

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

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

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

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

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

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

總結(jié)

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

網(wǎng)站標(biāo)題：Vue+elementUI實現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
文章來源：http://aaarwkj.com/article18/gjdjgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、品牌網(wǎng)站設(shè)計、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)