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