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

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

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页