資訊專欄INFORMATION COLUMN
摘要：實現(xiàn)多圖上傳主要用到以下兩個屬性是自帶多圖上傳的，但是細(xì)心的朋友可能發(fā)現(xiàn)默認(rèn)多圖的實現(xiàn)可能和我們預(yù)期有些出入，有截圖可以看出，實質(zhì)是進(jìn)行多次請求在上傳事件觸發(fā)后，多圖上傳的默認(rèn)實現(xiàn)調(diào)用了三次請求。
前言
工作中碰到需要多圖上傳，在使用element-ui解決過程中碰到一些問題，在這里分享給大家。
環(huán)境：Springboot+Vue+Element-ui
正文這次上傳使用的是Elemet-ui的uoload上傳組件，組件預(yù)留的鉤子回調(diào)還是比較充足的。
實現(xiàn)多圖上傳主要用到以下兩個屬性：
Elemet-ui是自帶多圖上傳的，但是細(xì)心的朋友可能發(fā)現(xiàn)默認(rèn)多圖的實現(xiàn)可能和我們預(yù)期有些出入，有截圖可以看出，實質(zhì)是進(jìn)行多次請求：
在上傳事件觸發(fā)后，多圖上傳的默認(rèn)實現(xiàn)調(diào)用了三次POST請求。
題主的需求正好需要的是多圖一次上傳，并且還要附帶一些基礎(chǔ)表單信息。
思路就是使用H5的FormData對象模擬表單上傳：
修改:auto-upload="false"屬性為false，阻止組件的自動上傳
new FormData()創(chuàng)建創(chuàng)建FormData對象
向FormData對象設(shè)置文件，并把FormData作為參數(shù)發(fā)送到后臺（后臺是java實現(xiàn)）
廢話這么多直接上代碼（僅寫功能實現(xiàn)涉及的屬性）：
前臺代碼：提交上傳
在組件標(biāo)簽上設(shè)置:auto-upload="false"阻止自動上傳為手動上傳
修改 :http-request="uploadFile"覆蓋組件的默認(rèn)上傳方法
new Vue({
el: "#app",
data: {
multiple:true,
formDate:""
},
mounted: function () {
},
methods: {
uploadFile(file){
this.formDate.append("file", file.file);
},
subPicForm(){
this.formDate = new FormData()
this.$refs.upload.submit();
this.formDate.append("WS_CODE", "12133");
let config = {
headers: {
"Content-Type": "multipart/form-data"
}
}
axios.post("your URL", this.formDate,config).then( res => {
console.log(res)
}).catch( res => {
console.log(res)
})
}
}
})
注意uploadFile()方法，這是我們覆蓋的上傳方法。我猜測在我們觸發(fā)開始上傳文件事件（ this.$refs.upload.submit()）后，組件會遍歷當(dāng)前文件列表的的文件，并調(diào)用上傳(uploadFile())方法，在(uploadFile())方法里會傳入一個file參數(shù)：
紅色方框就是我們要的每個file文件。
現(xiàn)在思路清晰了，只要在每次調(diào)用uploadFile()方法里把遍歷到的文件append()到FormData里面，然后再在上傳按鈕的事件里將“裝載”好的FormData對象作為參數(shù)發(fā)送到服務(wù)端就好了，表單數(shù)據(jù)也是一樣的append操作，下面是后臺的java代碼：
@ResponseBody
@RequestMapping(value = "/testPicUpload", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
public String testPicUpload(@RequestParam("file") MultipartFile[] file, String) throws Exception {
LoggerFactory.getLogger(getClass()).debug("長度"+file.length);
return "suc";
}
可以看到后臺拿到了我們傳上去的三張圖：
至此使用element-ui一次多圖上傳就完成了.
初次發(fā)文，如有問題請多指教。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/76584.html
摘要：先來看看常見的產(chǎn)品中的流中的布局朋友圈純客戶端的流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。興趣部落興趣部落的圖片很簡單粗暴，之間采用了的方式，不管多圖還是單圖，統(tǒng)一正方形顯示。 先來看看常見的產(chǎn)品中的feeds流中的布局： 1、朋友圈 純客戶端的feeds流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。大于一張圖片則以正方形顯示，一共顯示9張圖，九宮格，多了就不排...
摘要：先來看看常見的產(chǎn)品中的流中的布局朋友圈純客戶端的流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。興趣部落興趣部落的圖片很簡單粗暴，之間采用了的方式，不管多圖還是單圖，統(tǒng)一正方形顯示。 先來看看常見的產(chǎn)品中的feeds流中的布局： 1、朋友圈 純客戶端的feeds流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。大于一張圖片則以正方形顯示，一共顯示9張圖，九宮格，多了就不排...
摘要：常用的設(shè)置如下下的請求風(fēng)格下的請求和不太一樣，在正式的請求發(fā)出之前都會先發(fā)一個類型為的請求作為試探，只有當(dāng)該請求通過以后，正式的請求才能發(fā)向服務(wù)端。所以服務(wù)端路由我們還需要處理這樣一個請求注意該請求同樣需要設(shè)置跨域。 寫在前面 紅旗不倒，誓把JavaScript進(jìn)行到底！今天介紹我的開源項目 Royal 里的圖片上傳組件的前后端實現(xiàn)原理（React + Node），花了一些時間，希望對...
閱讀 4012·2021-09-24 10:24
閱讀 1402·2021-09-22 16:01
閱讀 2723·2021-09-06 15:02
閱讀 1021·2019-08-30 13:01
閱讀 1012·2019-08-30 10:52
閱讀 639·2019-08-29 16:36
閱讀 2239·2019-08-29 12:51
閱讀 2339·2019-08-28 18:29
