springBoot+ vue+ Element-ui實現合並多圖上傳（一次請求多張圖片）

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

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

 

下面講一下屬性使用：

 <el-upload
        :action="actionUrl + tokenInfo"
        list-type="picture-card"  //圖片預覽形式
        multiple  //是否支持多文件上傳
        :auto-upload="false"  // 關閉默認的自動上傳， 默認為true ,選擇文件過后會立刻上傳
        ref="upload"  //手動上傳
        accept=".jpg,.jpeg,.png,.JPG,.JPEG"   //支持的文件格式
        name="picture"  // 上傳文件的字段名
        :data="uploadPictureData"  // 附帶的上傳參數
        :file-list="fileList" 
        :on-exceed="handleExceed"  //選擇文件超出個數時觸發
        :on-change="handlePictureChange"  //文件增減、上傳觸發
        :http-request="uploadFile"  // 覆蓋默認的上傳行為， 默認情況下如果上傳多張照片會請求多次
        :limit="uploadSize"  // 選擇文件的最大個數
        :on-preview="handlePictureCardPreview">
        <i class="el-icon-plus"></i>
      </el-upload>

 

 默認情況下會請求多次 ， 如果加上 :http-request="uploadFile"  只會請求一次

在上傳事件觸發后，多圖上傳的默認實現調用了三次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代碼：

 參考：

https://segmentfault.com/a/1190000015834181