Spring Boot + Vue 前后端分离,两种文件上传方式总结
在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案:
- 通过 Ajax 实现文件上传
- 通过 ElementUI 里边的 Upload 组件实现文件上传
两种方案,各有优缺点,我们分别来看。
准备工作
首先我们需要一点点准备工作,就是在后端提供一个文件上传接口,这是一个普通的 Spring Boot 项目,如下:
SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
@PostMapping("/import")
public RespBean importData(MultipartFile file, HttpServletRequest req) throws IOException {String format = sdf.format(new Date());String realPath = req.getServletContext().getRealPath("/upload") + format;File folder = new File(realPath);if (!folder.exists()) {folder.mkdirs();}String oldName = file.getOriginalFilename();String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));file.transferTo(new File(folder,newName));String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/upload" + format + newName;System.out.println(url);return RespBean.ok("上传成功!");
}
复制代码
这里的文件上传比较简单,上传的文件按照日期进行归类,使用 UUID 给文件重命名。
这里为了简化代码,我省略掉了异常捕获,上传结果直接返回成功,后端代码大伙可根据自己的实际情况自行修改。
Ajax 上传
在 Vue 中,通过 Ajax 实现文件上传,方案和传统 Ajax 实现文件上传基本上是一致的,唯一不同的是查找元素的方式。
<input type="file" ref="myfile">
<el-button @click="importData" type="success" size="mini" icon="el-icon-upload2">导入数据</el-button>
复制代码
在这里,首先提供一个文件导入 input 组件,再来一个导入按钮,在导入按钮的事件中来完成导入的逻辑。
importData() {let myfile = this.$refs.myfile;let files = myfile.files;let file = files[0];var formData = new FormData();formData.append("file", file);this.uploadFileRequest("/system/basic/jl/import",formData).then(resp=>{if (resp) {console.log(resp);}})
}
复制代码
关于这段上传核心逻辑,解释如下:
- 首先利用 Vue 中的 $refs 查找到存放文件的元素。
- type 为 file 的 input 元素内部有一个 files 数组,里边存放了所有选择的 file,由于文件上传时,文件可以多选,因此这里拿到的 files 对象是一个数组。
- 从 files 对象中,获取自己要上传的文件,由于这里是单选,所以其实就是数组中的第一项。
- 构造一个 FormData ,用来存放上传的数据,FormData 不可以像 Java 中的 StringBuffer 使用链式配置。
- 构造好 FromData 后,就可以直接上传数据了,FormData 就是要上传的数据。
- 文件上传注意两点,1. 请求方法为 post,2. 设置
Content-Type
为multipart/form-data
。
这种文件上传方式,实际上就是传统的 Ajax 上传文件,和大家常见的 jQuery 中写法不同的是,这里元素查找的方式不一样(实际上元素查找也可以按照JavaScript 中原本的写法来实现),其他写法一模一样。这种方式是一个通用的方式,和使用哪一种前端框架无关。最后再和大家来看下封装的上传方法:
export const uploadFileRequest = (url, params) => {return axios({method: 'post',url: `${base}${url}`,data: params,headers: {'Content-Type': 'multipart/form-data'}});
}
复制代码
经过这几步的配置后,前端就算上传完成了,可以进行文件上传了。
使用 Upload 组件
如果使用 Upload ,则需要引入 ElementUI,所以一般建议,如果使用了 ElementUI 做 UI 控件的话,则可以考虑使用 Upload 组件来实现文件上传,如果没有使用 ElementUI 的话,则不建议使用 Upload 组件,至于其他的 UI 控件,各自都有自己的文件上传组件,具体使用可以参考各自文档。
<el-uploadstyle="display: inline":show-file-list="false":on-success="onSuccess":on-error="onError":before-upload="beforeUpload"action="/system/basic/jl/import"><el-button size="mini" type="success" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button>
</el-upload>
复制代码
- show-file-list 表示是否展示上传文件列表,默认为true,这里设置为不展示。
- before-upload 表示上传之前的回调,可以在该方法中,做一些准备工作,例如展示一个进度条给用户 。
- on-success 和 on-error 分别表示上传成功和失败时候的回调,可以在这两个方法中,给用户一个相应的提示,如果有进度条,还需要在这两个方法中关闭进度条。
- action 指文件上传地址。
- 上传按钮的点击状态和图标都设置为变量 ,在文件上传过程中,修改上传按钮的点击状态为不可点击,同时修改图标为一个正在加载的图标 loading。
- 上传的文本也设为变量,默认上传 button 的文本是
数据导入
,当开始上传后,将找个 button 上的文本修改为正在导入
。
相应的回调如下:
onSuccess(response, file, fileList) {this.enabledUploadBtn = true;this.uploadBtnIcon = 'el-icon-upload2';this.btnText = '数据导入';
},
onError(err, file, fileList) {this.enabledUploadBtn = true;this.uploadBtnIcon = 'el-icon-upload2';this.btnText = '数据导入';
},
beforeUpload(file) {this.enabledUploadBtn = false;this.uploadBtnIcon = 'el-icon-loading';this.btnText = '正在导入';
}
复制代码
- 在文件开始上传时,修改上传按钮为不可点击,同时修改上传按钮的图标和文本。
- 文件上传成功或者失败时,修改上传按钮的状态为可以点击,同时恢复上传按钮的图标和文本。
上传效果图如下:
总结
两种上传方式各有优缺点:
- 第一种方式最大的优势是通用,一招鲜吃遍天,到哪里都能用,但是对于上传过程的监控,进度条的展示等等逻辑都需要自己来实现。
- 第二种方式不够通用,因为它是 ElementUI 中的组件,得引入 ElementUI 才能使用,不过这种方式很明显有需多比较方便的回调,可以实现非常方便的处理常见的各种上传问题。
- 常规的上传需求第二种方式可以满足,但是如果要对上传的方法进行定制,则还是建议使用第一种上传方案。
关注公众号牧码小子,专注于 Spring Boot+微服务,定期视频教程分享,关注后回复 Java ,领取松哥为你精心准备的 Java 干货!
转载于:https://juejin.im/post/5cc518186fb9a03234165172
Spring Boot + Vue 前后端分离,两种文件上传方式总结相关推荐
- spring boot+iview 前后端分离架构之文件上传的实现(三十一)
spring boot 与 iview 前后端分离架构之文件上传的实现(三十一) 公众号 文件上传 前端改造 main.js引入配置的全局变量 编写baseImgUpload图片上传组件 baseIm ...
- phython在file同时写入两个_喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- Spring Boot+Vue/前后端分离/高并发/秒杀实战课程之spring Security快速搭建oauth2 内存版身份认证
Springboot快速搭建oauth2 内存版身份认证 环境准备 点击[Create New Project]创建一个新的项目 项目环境配置 配置Thymeleaf 搭建oauth2认证,加入两个依 ...
- 前后端分离 -- 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传 分页 】 文件上传也不过如此~
前后端分离 – 深入浅出系列 Spring Boot + Vue + ElementUI 实现相册管理系统[文件上传 分页 ] 文件上传也不过如此~ 引言 Hello,我是Bug终结者,一名热爱后端J ...
- 二阶段补充:文件上传服务端处理,后端文件上传、前端两种文件上传方式
1.文件上传 2.后端文件上传 两种方案: 兼容性较好的commons-fileupload,支持所有版本的Servlet,即所有版本的Tomcat 优点: 兼容性 缺点 需要外部jar,比较麻烦.代 ...
- 基于python的selenium两种文件上传方式
方法一.input标签上传 如果是input标签,可以直接输入路径,那么可以直接调用send_keys输入路径. 方法二.非input标签上传 这种上传方式需要借助第三方工具,主要有以下三种情 ...
- .vue文件_Spring Boot + Vue 前后端分离,两种文件上传方式总结!
在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 U ...
- Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
- Spring Boot + Vue前后端分离(一)前端Vue环境搭建
你好,[程序职场]专注于:Spring Boot ,微服务 和 前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索 副业赚钱渠道,在提升技术的同时我们一起交流 敏捷流程 提高工作效率 ...
最新文章
- Py之Beautiful Soup 4.2.0:Beautiful Soup 4.2.0的简介、安装、使用方法详细攻略
- 提问赠书 | 我们请了 7 位云原生专家,等你来问
- 从iOS应用中,启动一个Unity App
- SQL性能优化应该考虑哪些?
- IdentityServer4(OAuth2.0服务)折腾笔记
- 基于单链表的生产者消费者问题
- Quartz2D指定显示范围
- 数据消费过程_特色鲜卤现捞加盟店经营要如何抓准消费群体定位
- mysql5.3.4 mac 配置_Mac下安装与配置MySQL
- Unity3D 协程 浅谈
- canvas全局合成画月牙_教你用Python将自己喜欢的图片转成字符画,居然还有动态的 - 松鼠爱吃饼干...
- 简析平衡树(四)——FHQ Treap
- 15直接引语变间接引语(陈述句作宾语从句)
- JAVA设计模式之桥接模式
- java中直线距离的计算_java计算两点间的距离方法总结
- DSP TMS320F280049C之捕获eCAP(1)
- 活动图求最少时间和松弛时间
- ribbonmq超时配置_使用RabbitMQ实现订单超时取消(延迟队列)
- CH32F203C8T6 32位增强型低功耗Cortex-M3单片机
- 不同操作系统的默认TTL(生存时间)值
热门文章
- boost::mp11::mp_split相关用法的测试程序
- boost::lambda::ret用法的测试程序
- Boost:时间副本的测试程序
- Boost:序列化之text_wiarchive和和text_woarchive
- ITK:在签名图像中找到零交叉点
- VTK:PolyData之FieldData
- Qt Creator编辑状态图
- OpenGL Cube Map立方体贴图的实例
- OpenGL实现Amiga Boing
- C语言实现djikstra算法(附完整源码)