springboot:实现文件上传下载实时进度条功能【附带源码】
0. 引言
记得刚入行的时候,做了一个文件上传的功能,因为上传时间较久,为了用户友好性,想要添加一个实时进度条,显示进度。奈何当时技术有限,查了许久也没用找到解决方案,最后不了了之。
近来偶然想到这个问题,于是决定整理一下实现方式,也为和我曾经一样碰壁的同学,提供一些思路。
1. 思路
1、首先我们这里实现的是一个实时的进度条,并不是一个纯前端的进度条,它需要根据后端的处理进度来实时反馈进度条长度,那么必然要与后端交互。
当然这里容易陷入一个误区,觉得与后端交互的,那么这个功能的重点一定在后端,但实际上这个功能的重点在前端。
不难想到,我们要知道实时进度,那么一定需要不断的请求后端,得到响应反馈,前后端请求比较常用的是ajax
,但除它之外,我们还有更基础的xhr
(XMLHttpRequest)。作为后端同学可能对xhr有些陌生,实际上ajax就是基于xhr实现的。
2、xhr
可以让我们在不重新加载页面的情况下更新网页,在页面已经加载后从后端请求并接受数据,这样就可以无感的让我们后端文件的上传进度了。
3、为了监听文件上传下载进度,我们主要使用到xhr的三个进度事件:
- progress: 在接收响应期间持续不断地触发
- load: 在接收到完整的响应数据时触发
- error: 在请求发生错误时触发
当然除上述三个事件之外,还有其他的进度事件,这不是本文的重点,大家可自行拓展学习XHR对象的进度事件
XMLHttpRequest简介
4、基于上述三个进度事件,我们可以通过process事件持续不断地发送请求获取文件上传下载的进度,load事件用于文件上传下载完成后的处理,比如提示成功。error用于请求发送错误时的处理。
5、有了上述的思路之后,我们来进行实际演示。
2. 实操
2.1 实现文件上传实时进度条功能
1、创建springboot项目,引入spring web
、lombok
、文件上传commons-fileupload
依赖
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional>
</dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.4</version>
</dependency>
2、创建MultipartResolver
的bean,用来将普通的请求封装成拥有文件上传功能的请求
@Component
public class FileUpLoadConfig {@Bean(name="multipartResolver")public MultipartResolver multipartResolver(){return new CommonsMultipartResolver();}
}
3、创建一个文件上传接口:这里我单纯做个演示,就直接在controller层中书写了,实际生产要将上传方法提取为工具类,在service中进行具体业务处理。
如下代码为将文件上传后,保存到资源文件夹下
@RestController
@RequestMapping("file")
public class FileController {private final static Logger log = LoggerFactory.getLogger(FileController.class);@PostMapping("/upload")@ResponseBodypublic ResponseEntity<String> fileUpload(@RequestParam("file") MultipartFile file) {try {// 获取资源文件存放路径,用于临时存放生成的excel文件String path = Objects.requireNonNull(this.getClass().getClassLoader().getResource("")).getPath();// 文件名String fileName = path + file.getOriginalFilename();// 创建目标文件File dest = new File(fileName);// 向指定路径写入文件file.transferTo(dest);// 返回文件访问路径return new ResponseEntity<>(fileName, HttpStatus.OK);} catch (Exception e) {e.printStackTrace();log.info(String.format("文件上传失败,原因:%s",e));return new ResponseEntity<>("文件上传失败", HttpStatus.INTERNAL_SERVER_ERROR);}}
}
4、后端接口完成后,进入我们的重点,我们来实现前端进度条
5、首先引入jQuery,我这里使用了3.6.1版本
6、实现一个上传的页面,这里利用了html5的progress
标签,该标签用于实现进度条,支持两个属性:value和max,分别为当前进度值和最大进度值
<div class="modal-body form "><!-- 文件上传 --><form id="dialogForm" class="form-horizontal"><div class="form-group"><label class="control-label">文件:</label><div ><input type="file" name="file" id="file" onchange="upload()"></div></div><div class="form-group"><label class="control-label">上传进度:</label><div ><!--进度条--><div id="progress-body"><progress></progress><div id="progress-bar">0%</div></div></div></div></form></div>
7、书写进度监听方法,即progress
方法
//进度条更新function progressHandle(e) {$('#progress-body progress').attr({value : e.loaded,max : e.total});var percent = (e.loaded / e.total * 100).toFixed(2);$('#progress-body #progress-bar').html(percent + "%");};
8、书写load
,error
方法
//上传完成处理函数function uploadSuccess(e) {alert("上传完成");};//上传出错处理函数function uploadFail(e) {alert("上传失败");};
9、实现上传方法upload
// 文件上传function upload() {var formData = new FormData();formData.append("file", $("#file")[0].files[0]);$.ajax({url : "/file/upload",type : "POST",data : formData,processData : false, // 告诉jQuery不要去处理发送的数据contentType : false, // 告诉jQuery不要去设置Content-Type请求头success : function(data) {console.log(data);},xhr : function() {var xhr = $.ajaxSettings.xhr();// xhr.upload专用于上传事件监听if (xhr.upload) {//处理进度条的事件xhr.upload.addEventListener("progress", progressHandle,false);//加载完成的事件xhr.addEventListener("load", uploadSuccess, false);//加载出错的事件xhr.addEventListener("error", uploadFail, false);return xhr;}}});}
10、运行项目,访问上传页,我这里直接书写在index.html
中了
11、测试:如下图所示,可以正常显示进度
12、上传成功后,后台资源文件夹中也能看到对应的上传文件,演示成功!
2.2 实现文件下载实时进度条功能
上述我们讲解了如何实现上传进度条功能,有了这个思路,我们再实现下载功能:
1、同样,我们实现一个简单的进度条页面
<!-- 文件下载 --><form id="dialogForm" class="form-horizontal"><div class="form-group"><label class="control-label">下载进度:</label><div><!--进度条--><div id="progress-body"><progress></progress><div id="progress-bar">0%</div></div></div></div><button type="button" onclick="download()">下载</button></form>
2、实现下载方法
这里我们不再采用ajax的方法,而是直接通过xhr请求,并且因为要在浏览器中下载该文件,所以以window.URL.revokeObjectURL
方法来下载并释放该文件。
// 文件下载function download() {var xhr = new XMLHttpRequest();//处理进度条的事件xhr.addEventListener("progress", progressHandle, false);//加载出错的事件xhr.addEventListener("error", uploadFail, false);xhr.open("POST","/file/download");//设置响应类型xhr.responseType = 'blob';xhr.onload = function (e) {if (this.status === 200) {// 截取掉'attachment;filename='var filename = xhr.getResponseHeader("Content-disposition").slice(20);var blob = this.response;var a = document.createElement('a');var url = URL.createObjectURL(blob);a.href = url;a.download = filename;document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);}}xhr.send();}//进度条更新function progressHandle(e) {$('#progress-body progress').attr({value: e.loaded,max: e.total});var percent = (e.loaded / e.total * 100).toFixed(2);$('#progress-body #progress-bar').html(percent + "%");};//上传出错处理函数function uploadFail(e) {alert("下载失败");};
3、实现后端下载文件接口
这里与上传文件不同的是,前端在进行文件上传时,是可以获取到文件的总大小的,而下载文件时因为是流式下载,前端是不知道要下载的文件一共有多少大小的。
因此也就无法估算总体的进度比例。所以我们后端接口中要通过Content-Length
响应头指定文件的总大小
我这里为了演示方便,直接下载上述上传的文件。实际应用可更改为你自己的文件下载路径。
@PostMapping("/download")@ResponseBodypublic ResponseEntity<String> download(HttpServletResponse response) throws IOException {// 获取资源文件存放路径,用于临时存放生成的excel文件String path = Objects.requireNonNull(this.getClass().getClassLoader().getResource("")).getPath();File pathFile = new File(path);File[] files = pathFile.listFiles();if (ObjectUtils.isEmpty(files)) {return new ResponseEntity<>("文件为空,请先上传文件", HttpStatus.OK);}InputStream inputStream = null;ServletOutputStream ouputStream = null;try {for (File file : files) {if(file.isDirectory()){continue;}inputStream = new FileInputStream(file);response.setContentType("application/x-msdownload");response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(file.getName(), "UTF-8"));// 设置一个总长度,否则无法估算进度response.setHeader("Content-Length",String.valueOf(file.length()));ouputStream = response.getOutputStream();byte b[] = new byte[1024];int n;while ((n = inputStream.read(b)) != -1) {ouputStream.write(b, 0, n);}ouputStream.flush();break;}} catch (Exception e) {e.printStackTrace();} finally {if(inputStream != null){inputStream.close();}if(ouputStream != null){ouputStream.close();}}return new ResponseEntity<>("文件下载成功", HttpStatus.OK);}
4、运行项目
5、测试:文件成功下载,进度也实时显示
3. 项目源码
以上演示源码可在如下地址下载:
文件上传下载实时进度源码
4. 总结
以上我们就完成了文件的上传和下载的实时进度监控,虽然这个功能的重点在前端,但是后端通过这个功能点,也能更好的理解前后端请求的交互。
最后我们抛出一个思考问题:如何实时监控后端自定义功能的执行进度?
springboot:实现文件上传下载实时进度条功能【附带源码】相关推荐
- 微信小程序开发之文件上传下载应用场景(附Demo源码)
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
- 字符串操作以及打印 —— 实现上传下载的进度条功能
import sysdef processBar(num, total):rate = num / totalrate_num = int(rate * 100)if rate_num == 100: ...
- php带截切图片上传_PHP大文件切割上传并带进度条功能示例
本文实例讲述了PHP大文件切割上传并带进度条功能.分享给大家供大家参考,具体如下: 前面一篇介绍了PHP大文件切割上传功能,这里再来进一步讲解PHP大文件切割上传并带进度条功能. 项目结构图: 14- ...
- java mvc上传文件进度_java相关:springMVC+ajax实现文件上传且带进度条实例
java相关:springMVC+ajax实现文件上传且带进度条实例 发布于 2020-7-5| 复制链接 本篇文章主要介绍了springMVC+ajax实现文件上传且带进度条实例,具有一定的参考价值 ...
- SpringMVC +layui 实现多文件上传,附加进度条
首先在进行文件上传操作的时候,你得对layui 中文件上传的一些参数先了解一下,不要网上复制粘贴,起码你要对layui 文件上传的必备参数做一些大致掌握,也是自己学习. (1) 首先你得引入layui ...
- SpringBoot图文教程4—SpringBoot 实现文件上传下载(亲测)
SpringBoot 图文教程系列文章目录 SpringBoot图文教程1「概念+案例 思维导图」「基础篇上」 SpringBoot图文教程2-日志的使用「logback」「log4j」 Spring ...
- springboot改文件头_SpringBoot图文教程4—SpringBoot 实现文件上传下载
有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 文章结尾配套自测面试题,学完技术自我测试更扎实 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例 ...
- SpringBoot(SpringMVC)文件上传下载
话说,springboot不是一个全新的框架,它只是将其它框架整合在一起,提供一个"开箱即用"的环境.此文,利用的正是SpringMVC的功能. 创建springboot项目:ht ...
- vue+element-ui+axios+springboot实现文件上传下载
前端技术:vue,element-ui,axios 后台技术:springboot 本篇博客只给出关键的代码,提供思路,完全的涉及保密不方便提供 一,上传: 上传element组件代码,支持多文件,拖 ...
最新文章
- 《算法竞赛进阶指南》打卡-基本算法-AcWing 93. 递归实现组合型枚举:递归与递推、dfs、状态压缩
- UI组件之ImageView及其子类(二)ImageButton ,ZoomButton
- python学习-综合练习三(斐波那契数列、阿姆斯特朗数、//和/、十进制转二进制bin、八进制oct、十六进制hex、进制转换源码、python中::和:的区别)
- C和指针之函数之归以字符形式按顺序打印数字的每位数字(递归和非递归)
- java 引用队列_Java中管理资源的引用队列相关原理解析
- Java17,有史以来最快 JDK!
- [Python] 当猎头遇上 Guido van Rossum
- 6.go import
- Redhat5.2yum源更新为centos源
- 插件地址(eclipse jrebel jed)、问题
- comsol和java_COMSOL java API——编译comsol模型java文件
- CSS中使用border属性来绘制三角形
- 长连接与短连接的区别
- 学生信息管理系统—流程图
- 看美剧《疑犯追踪》,学地道美语 Learn idiomatic American English by watching Tv series Person of Interest
- SAR笔记-卫星轨道建模
- 中国古代30大名将VS100名将排行(按时间顺序)
- VUE解决路由里的参数改变页面却没有跳转的问题
- ARIMA模型实例讲解:时间序列预测需要多少历史数据?
- 非常口語化的英語單詞,短句
热门文章
- IP地址这么重要的知识,居然听一个学弟说没用?
- 饼图加引导线_【如何在饼形图中添加引导线(Excel)】excle里面一条竖状线
- 每日一Tip:Jetbrains旗下集成环境(pycharm、IDEA等)使用Ctrl +鼠标滚轮上下滑放大缩小快捷键设置
- pycharm离线安装中文插件
- rrpp+ospf环网组建
- [解疑][VS]Visual Studio软件编程时,ID号的格式ID_,IDS_,IDC_,IDI_,IDB_,IDD_之间有什么区别?
- 狸窝音频剪辑软件_5分钟学会影视剪辑:账号注册、素材寻找、剪辑使用、获取收益...
- 软件测试体系学习及构建(1)-软件测试环境介绍
- 三天打鱼两天晒网的直接差距
- 软件测试的各种技术你知道吗?