Element-ui實現合併多圖上傳（一次請求多張圖片）

前言

工做中碰到須要多圖上傳，在使用element-ui解決過程當中碰到一些問題，在這裏分享給你們。

環境：

Springboot+Vue+Element-ui

正文

此次上傳使用的是Elemet-ui的uoload上傳組件，組件預留的鉤子回調仍是比較充足的。

實現多圖上傳主要用到如下兩個屬性：

Elemet-ui是自帶多圖上傳的，可是細心的朋友可能發現默認多圖的實現可能和咱們預期有些出入，有截圖能夠看出，實質是進行屢次請求：

在上傳事件觸發後，多圖上傳的默認實現調用了三次POST請求。

題主的需求正好須要的是多圖一次上傳，而且還要附帶一些基礎表單信息。
思路就是使用H5的FormData對象模擬表單上傳：

1. 修改:auto-upload="false"屬性爲false，阻止組件的自動上傳
2. new FormData()建立建立FormData對象
3. 向FormData對象設置文件，並把FormData做爲參數發送到後臺（後臺是java實現）

廢話這麼多直接上代碼（僅寫功能實現涉及的屬性）：

前臺代碼：

<!-- html組件代碼 -->
 <el-upload
   :multiple="multiple"
   action="${pageContext.request.contextPath}/lookup/editEvidence/123"
   list-type="picture-card"
   :auto-upload="false"
   :http-request="uploadFile"
   ref="upload"
  >
 <i class="el-icon-plus"></i>
 </el-upload>
 <el-button @click="subPicForm">提交上傳</el-button>

在組件標籤上設置:auto-upload="false"阻止自動上傳爲手動上傳
修改 :http-request="uploadFile"覆蓋組件的默認上傳方法

<!-- JS代碼 -->
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()方法，這是咱們覆蓋的上傳方法。我猜想在咱們觸發開始上傳文件事件（ this.$refs.upload.submit()）後，組件會遍歷當前文件列表的的文件，並調用上傳(uploadFile())方法，在(uploadFile())方法裏會傳入一個file參數：

紅色方框就是咱們要的每一個file文件。
如今思路清晰了，只要在每次調用uploadFile()方法裏把遍歷到的文件append()到FormData裏面，而後再在上傳按鈕的事件裏將「裝載」好的FormData對象做爲參數發送到服務端就行了，表單數據也是同樣的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一次多圖上傳就完成了.

初次發文，若有問題請多指教。