element-ui上传组件，通过自定义请求上传文件
element-ui上传组件，通过自定义请求上传文件
codeniu
发布于 2022-02-25 13:48:41
发布于 2022-02-25 13:48:41
记录使用element-ui上传组件，通过自定义请求上传文件需要注意的地方。
<el-upload
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
>选取文件</el-upload>
<el-button type="primary" size="small" @click="submitUpload">上传</el-button>首先关闭自动上传，并给随便给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){}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-03-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录