springboot 整合 gridfs 、webUploader实现大文件分块上传、断点续传、秒传-526互联

主要的pom.xml：

<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
大家发现多了一个mysql，主要是为了在里面存文件列表用

resource目录如下：

application.properties：

替换成自己的用户名密码

pring.datasource.url=jdbc:mysql://127.0.0.1:3306/hrms?useUnicode=true&characterEncoding=utf8&useSSL=true&serverTimezone=GMT
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.database=mysql
#自动建表
spring.jpa.hibernate.ddl-auto=update
#设置数据库方言
spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect
#打印sql
spring.jpa.show-sql=true

#连接mongodb
spring.data.mongodb.uri=mongodb://127.0.0.1:27017/mydb
spring.data.mongodb.username=root
spring.data.mongodb.password=123456

前端upload.html：

进度条仅为测试，样式有点丑请忽略（webUploader官网的例子有点问题，需要自己调一下）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<link rel="stylesheet" type="text/css" href="/css/webuploader.css">

<script type="text/javascript" src="/js/admin.js"></script>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/webuploader.js"></script>

<style>
#ctlBtn {
top: 0px;
left: 0px;
width: 94px;
height: 40.8px;
overflow: hidden;
bottom: auto;
right: auto;
}
</style>
</head>
<body>
<div id="uploader" class="wu-example">

<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
</body>
<script>
var md5;
//监听分块上传过程中的三个时间点
WebUploader.Uploader.register({
"before-send-file": "beforeSendFile",
"before-send": "beforeSend",
"after-send-file": "afterSendFile"
}, {
//时间点1：所有分块进行上传之前调用此函数
beforeSendFile: function (file) {
var deferred = WebUploader.Deferred();
//1、计算文件的唯一标记，用于断点续传
(new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024)
.progress(function (percentage) {
$('#' + file.id).find("p.state").text("正在读取文件信息...");
})
.then(function (val) {
md5 = val;
$('#' + file.id).find("p.state").text("成功获取文件信息...");
//获取文件信息后进入下一步
deferred.resolve();
});
return deferred.promise();
},
//时间点2：如果有分块上传，则每个分块上传之前调用此函数
beforeSend: function (block) {
var deferred = WebUploader.Deferred();
$.ajax({
type: "get",
url: BASE_PATH + "/check",
data: {
//文件唯一标记
"md5": md5,
//当前分块下标
"chunk": block.chunk,
//当前分块大小
"chunkSize": block.end - block.start
},
//无缓存
cache: false,
//无异步（必须加，否则异步上传会上传已经上传过的块）
async: false,
dataType: "json",
success: function (data) {
if (data) {
//分块存在，跳过
deferred.reject();
} else {
//分块不存在或不完整，重新发送该分块内容
deferred.resolve();
}
}
});

this.owner.options.formData.md5 = md5;
deferred.resolve();
return deferred.promise();
}
//时间点3：所有分块上传成功后调用此函数
// afterSendFile: function () {
// //如果分块上传成功，则通知后台合并分块
// $.ajax({
// type: "POST",
// url: "<%=basePath%>Video?action=mergeChunks",
// data: {
// md5: md5,
// },
// success: function (response) {
// alert("上传成功");
// var path = "uploads/" + md5 + ".mp4";
// $("#item1").attr("src", path);
// }
// });
// }
});
var uploader = WebUploader.create({
// swf文件路径
swf: BASE_PATH + "/js/Uploader.swf",
// 文件接收服务端。
server: BASE_PATH + "/upload",
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: "#picker",
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
//开启分片上传
chunked: true,
//分片大小
chunkSize: 10 * 1024 * 1024,
//并发数
threads: 10
//请求参数表
// formData:datalist,
});

$("#ctlBtn").on("click", function () {
uploader.upload();
});

// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
$("#thelist").append("<div id=\"" + file.id + "\" class=\"item\">" +
"<h4 class=\"info\">" + file.name + "</h4>" +
"<p class=\"state\">等待上传...</p>" +
"</div>");
// //暂停上传的文件
// $("#thelist").on('click', '.stop', function () {
// uploader.stop(true);
// }),
// //删除上传的文件
// $("#thelist").on('click', '.remove', function () {
// if ($(this).parents(".item").attr('id') === file.id) {
// uploader.removeFile(file);
// $(this).parents(".item").remove();
// }
// })
});

// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id);
var $percent = $li.find('.progress .progress-bar');

// 避免重复创建
if (!$percent.length) {
// $percent = $('<div class="progress progress-striped active">' +
// '<div class="progress-bar" role="progressbar" style="width: 0%">' +
// '</div>' +
// '</div>').appendTo($li).find('.progress-bar');
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress');
}
$li.find('p.state').text('上传中');
$percent.css({'width': percentage * 100 + '%', 'height': 10, 'background-color': 'blue'});
});

uploader.on('uploadSuccess', function (file) {
$('#' + file.id).find('p.state').text('已上传');
});

uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});

uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut();
});

</script>
</html>

参考文章：http://blog.ncmem.com/wordpress/2023/10/25/springboot-%e6%95%b4%e5%90%88-gridfs-%e3%80%81webuploader%e5%ae%9e%e7%8e%b0%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e5%9d%97%e4%b8%8a%e4%bc%a0%e3%80%81%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0%e3%80%81/

欢迎入群一起讨论

断点webuploader springboot文件