vue+element-ui实现上传文件（el-upload）

前言

一直以来就对上传文件的整个流程不太清楚，最近有时间刚好整理一下上传文件的过程，用的是vue+element-ui，后端是springboot架构。

前端

先上图：

解释一下：

limit 限制单次上传文件的数量，超过这个数量的文件无法上传
drag 允许拖拽上传
action 上传文件的url地址，我这里是根据开发环境还是生产环境动态选择的地址
accept 接受的文件类型，这里控制的是在打开资源器时，显示的可选的文件类型，比如我这里是.der和.cer格式的文件，那么打开资源管理器之后，非der和cer的文件将不会显示
data 上传时可携带的参数，这里后台用map接收
before-upload 上传之前的钩子，可以用来做一些校验
on-success 上传成功之后的钩子，可以用来清除表单校验和文件列表
on-error 上传失败之后的钩子
auto-upload 选择文件之后是否立即上传

这里再贴一下我的action的写法（要写在computed中）

为什么要区分运行环境来使用不同的url？

因为开发环境是配置了代理的

而这个值在开发环境中是"/dev-api",在生产环境是“/”

所以开发环境需要在开头加上"/dev-api"，生产环境则不需要

那为什么只有这一个要单独处理，其他的url不需要呢？因为其他的url是通过axios请求的，axios中配置了baseUrl，所以其他的url不需要单独处理了

后端

现在来说下后端如何实现

我这个例子中前端会向后端传递两个参数，一个是data中的参数，另一个就是文件了，所以后端代码如下
这是单次上传一个文件的情况，如果是多个文件，第二个参数就要用数组了（MultipartFile[]），
接下来就可以根据自己的需要进行处理了。

最后

这是一个很简单的上传文件的流程了，不过el-upload还有很多的配置，附上el-upload的地址
https://element.eleme.cn/#/zh-CN/component/upload

最好的资料莫过于官方文档了😁