阅读 135

element-ui上传组件,通过自定义请求上传文件

这是我参与更文挑战的第1天,活动详情查看:更文挑战

前言

前端文件上传是比较常见的需求,element-ui 的 upload 组件给前端开发人员提供了很大的便利,简化了开发人员的工作,但是由于组件需要适应各种条件,因此有些特定的需求单单依靠组件本身来完成就有点困难了。

比如我在上一个项目中。有很多表单维护的页面,页面中同时包含文件的上传,后端接口要求文件同表单数据一同传递过来,还有的时候要求,表单数据提交通过后,再进行文件的上传。那么就需要对element-ui的 upload 组件进行修改使其通过我们自定义的请求去上传文件。

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

代码

组件本身

此时的上传组件本身起到的作用是获取文件对象。使用input标签的type=file也可以起到相同的作用。

upload.vue

<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){}
复制代码

总结

接触前端开发没多久,在实现这样的需求的时候还是走了不少弯路,期间也有尝试自己封装上传组件,其结果就是组件像是一个烂了三个轮胎的汽车一样。在熟悉组件 API 后还应改多思考,组件背后做了哪些工作。

文章分类
前端
文章标签