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一次多图上传就完成了.

初次发文，若有问题请多指教。