实现大文件断点续传（支持网络异常，服务宕机）
精简博客内容，尽量已专业术语来分享。
努力做到对每一位认可自己的读者负责。
帮助别人的同时更是丰富自己的良机。
springboot
mysql
jdk1.8
工作原理
1、前端以分片的形式计算出整个文件的 md5 值以及文件大小 size；
2、使用 md5、 size 去请求后台判断文件是否已经存在；
- 有数据，且数据大小与 size 一致，则文件已存在，此时直接结束提示文件已上传
- 有数据，且数据大小与 size 不一致，则文件上传了一部分
- 查询无数据，则未上传过此文件。此时向数据库中记录 name、md5
3、前端遍历分片进行上传。判断分片是否已经上传，若已上传则跳过，否则上传分片文件；
4、若上传失败，则保存失败的文件分片索引；
5、文件分片上传全部结束，通知服务器进行合并；
6、合并分片结束，并删除保存的分片临时文件以及数据库分片数据
表结构
DROP TABLE IF EXISTS `file`;
CREATE TABLE `file` (
`id` int(11) PRIMARY KEY AUTO_INCREMENT,
`patch_index` int(11) NULL DEFAULT NULL,
`parent` int(11) NULL DEFAULT NULL,
`name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`path` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`md5` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`size` bigint(11) NOT NULL,
`create_time` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0),
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1179 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;
application.yml 参数配置
spring:
datasource:
username: root
password: XXXXXX
url: jdbc:mysql://localhost:3306/springboot?useSSL=false
driver-class-name: com.mysql.jdbc.Driver
servlet:
multipart:
max-file-size: 10MB
max-request-size: 100MB
mvc:
view:
prefix: /WEB-INF/views/
suffix: .jsp
mybatis:
mapper-locations: classpath:mapper/*Mapper.xml
type-aliases-package: com.sun.myuploader.model
server:
port: 8080
前端视图操作
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>文件上传</title>
<meta charset="UTF-8"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/spark-md5.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/patchUpload.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/upload/webuploader/jquery-1.7.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/upload/webuploader/webuploader.min.js"></script>
<link href="<%=request.getContextPath()%>/upload/webuploader/webuploader.css" type="css/text" />
<script type="text/javascript" src="<%=request.getContextPath()%>/upload/admin/bootstrap/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>upload/admin/bootstrap/jquery-ui.js"></script>
<link href="<%=request.getContextPath()%>/upload/admin/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="<%=request.getContextPath()%>/upload/admin/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<div style="margin: 30px;">
<h2>文件上传</h2>
<div style="margin: 20px 20px 20px 0;">
<div id="picker" class="form-control-focus"></div>
<input id="file" type="file"/>
</div>
<div id="thelist" class="uploader-list"></div>
<button id="upload" type="button" class="btn btn-warning">开始同步</button>
</div>
</body>
</html>
效果图
项目层级目录结构
项目共享地址
GITHUB:完整Demo链接
转载：https://blog.csdn.net/qq_39443053/article/details/105395666
查看评论