前言

工作中碰到需要多图上传，在使用element-ui解决过程中碰到一些问题，在这里分享给大家。

环境：

Springboot+Vue+Element-ui

正文

这次上传使用的是Elemet-ui的uoload上传组件，组件预留的钩子回调还是比较充足的。

实现多图上传主要用到以下两个属性：

Elemet-ui是自带多图上传的，但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入，有截图可以看出，实质是进行多次请求：

在上传事件触发后，多图上传的默认实现调用了三次POST请求。

题主的需求正好需要的是多图一次上传，并且还要附带一些基础表单信息。

思路就是使用H5的FormData对象模拟表单上传：

修改:auto-upload="false"属性为false，阻止组件的自动上传

new FormData()创建创建FormData对象

向FormData对象设置文件，并把FormData作为参数发送到后台(后台是java实现)

废话这么多直接上代码(仅写功能实现涉及的属性)：

前台代码：

:multiple="multiple"

action="${pageContext.request.contextPath}/lookup/editEvidence/123"

list-type="picture-card"

:auto-upload="false"

:http-request="uploadFile"

ref="upload"

>

提交上传

在组件标签上设置:auto-upload="false"阻止自动上传为手动上传

修改:http-request="uploadFile"覆盖组件的默认上传方法

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

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