elementui 上传请求头_element-ui上传组件，通过自定义请求上传文件

记录使用element-ui上传组件，通过自定义请求上传文件需要注意的地方。

ref="uploadMutiple"

:auto-upload="false"

action="Fake Action"

:on-success="allHandleSuccess"

:on-change="handleChange"

:file-list="fileList"

:http-request="allUpload"

:before-upload="before_upload"

multiple

>选取文件

上传

首先关闭自动上传，并给随便给action赋值一个字符串。(action是必填属性)

:auto-upload="false"

action="Fake Action"

通过:on-change钩子函数，拿到文件列表：

handleChange(file, fileList) {

this.fileList = fileList;

},

一般情况下，我们在submitUpload()的点击事件中去触发上传：

submitUpload() {

this.$refs.uploadMutiple.submit();

}

之后组件会触发:http-request钩子行数。需要注意的是，这里你的fileList中有几个文件，就会执行几次:http-request钩子函数。这意味着，如果你把上传请求写在:http-request钩子函数中，就会造成重复不必要的请求。直接在submitUpload()中写post请求即可。只需要把文件封装为formData对象，作为参数传给后台即可。

let formData = new FormData();

this.fileList.forEach(item => {

formData.append("files", item.raw);

});

this.axios.post(api, formData);

下面是后台接口的写法：

public JSONResponse archiveBatchImport(@RequestParam("files") MultipartFile[] files){}