大文件批量上传断点续传文件秒传
sanri1993 人气:0接上篇文章 java 超大文件分片上传 在其基础上继续实现 断点续传和文件秒传功能
在上篇中，我们可以使用 file. slice 方法对文件进行分片，可以从后台读到当前文件已经上传的大小，就可以知道从哪里开始切片，断点续传的原理就是基于这个的。
前端计算文件的 md5 ，后台数据库查询一遍（前提是把 md5 存储了，计算文件 md5 也是需要消耗时间的）即可知道是否有相同文件，这是实现文件秒传的方法。
可能存在的问题：
- 有两个人同时在上传同一个文件，但前一个人还没有上传完成，此时第二个文件认为是新文件不能秒传
- 此时获取文件原数据时需要将文件信息保存起来，重点是要保存 md5 ，保证一个文件的 md5 保计算一次
- 获取断点文件时，真实的文件上传位置应该是从文件系统中读出来的
根据需求说明，后台应该存在四个接口，获取文件信息（包含是否可以秒传），获取断点文件列表，分片上传接口，文件完整性验证
全部源码位置 ： https://gitee.com/sanri/example/tree/master/test-mvc
/**
* 加载断点文件列表
* @return
*/
@GetMapping("/breakPointFiles")
public List<FileInfoPo> breakPointFiles(){
List<FileInfoPo> fileInfoPos = fileMetaDataRepository.breakPointFiles();
return fileInfoPos;
}
/**
* 获取文件元数据，判断文件是否可以秒传
* @param originFileName
* @param fileSize
* @param md5
* @return
* @throws URISyntaxException
*/
@GetMapping("/fileMetaData")
public FileMetaData fileMetaData(String originFileName, Long fileSize, String md5) throws URISyntaxException, MalformedURLException {
FileMetaData similarFile = bigFileStorage.checkSimilarFile(originFileName,fileSize, md5);
if(similarFile != null){
similarFile.setSecUpload(true);
// 如果文件名不一致，则创建链接文件
if(!similarFile.getOriginFileName() .equals(originFileName)) {
bigFileStorage.createSimilarLink(similarFile);
}
return similarFile;
}
//获取文件相关信息
String baseName = FilenameUtils.getBaseName(originFileName);
String extension = FilenameUtils.getExtension(originFileName);
String finalFileName = bigFileStorage.rename(baseName, fileSize);
if(StringUtils.isNotEmpty(extension)){
finalFileName += ("."+extension);
}
URI relativePath = bigFileStorage.relativePath(finalFileName);
//如果没有相似文件，则要创建记录到数据库中，为后面断点续传做准备
FileInfoPo fileInfoPo = new FileInfoPo();
fileInfoPo.setName(originFileName);
fileInfoPo.setType(extension);
fileInfoPo.setUploaded(0);
fileInfoPo.setSize(fileSize);
fileInfoPo.setRelativePath(relativePath.toString());
fileInfoPo.setMd5(md5);
fileMetaDataRepository.insert(fileInfoPo);
URI absoluteURI = bigFileStorage.absolutePath(relativePath);
FileMetaData fileMetaData = new FileMetaData(originFileName, finalFileName, fileSize, relativePath.toString(), absoluteURI.toString());
fileMetaData.setMd5(md5);
fileMetaData.setFileType(extension);
return fileMetaData;
}
/**
* 获取当前文件已经上传的大小，用于断点续传
* @return
*/
@GetMapping("/filePosition")
public long filePosition(String relativePath) throws IOException, URISyntaxException {
return bigFileStorage.filePosition(relativePath);
}
/**
* 上传分段
* @param multipartFile
* @return
*/
@PostMapping("/uploadPart")
public long uploadPart(@RequestParam("file") MultipartFile multipartFile, String relativePath) throws IOException, URISyntaxException {
bigFileStorage.uploadPart(multipartFile,relativePath);
return bigFileStorage.filePosition(relativePath);
}
/**
* 检查文件是否完整
* @param relativePath
* @param fileSize
* @param md5
* @return
*/
@GetMapping("/checkIntegrity")
public void checkIntegrity(String relativePath,Long fileSize,String fileName) throws IOException, URISyntaxException {
long filePosition = bigFileStorage.filePosition(relativePath);
Assert.isTrue(filePosition == fileSize ,"大文件上传失败，文件大小不完整 "+filePosition+" != "+fileSize);
String targetMd5 = bigFileStorage.md5(relativePath);
FileInfoPo fileInfoPo = fileMetaDataRepository.selectByPrimaryKey(fileName);
String md5 = fileInfoPo.getMd5();
Assert.isTrue(targetMd5.equals(md5),"大文件上传失败，文件损坏 "+targetMd5+" != "+md5);
//如果文件上传成功，更新文件上传大小
fileMetaDataRepository.updateFilePosition(fileName,filePosition);
}重要的处理部分其实还是前端，下面看前端的代码，需要使用到一个计算 md5 值的库 spark-md5.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大文件批量上传，支持断点续传，文件秒传</title>
<style>
.upload-item{
padding: 15px 10px;
list-style-type: none;
display: flex;
flex-direction: row;
margin-bottom: 10px;
border: 1px dotted lightgray;
width: 1000px;
position: relative;
}
.upload-item:before{
content: ' ';
background-color: lightblue;
width: 0px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
}
.upload-item span{
display: block;
margin-left: 20px;
}
.upload-item>.file-name{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upload-item>.upload-process{
width: 50px;
text-align: left;
}
.upload-item>.upload-status{
width: 100px;
text-align: center;
}
table{
width: 100%;
border-collapse: collapse;
position: fixed;
bottom: 200px;
border: 1px solid whitesmoke;
}
</style>
</head>
<body>
<div class="file-uploads">
<input type="file" multiple id="file" />
<button id="startUpload">开始上传</button>
<ul id="uploadfiles">
</ul>
<table class="" style="" id="table" >
<thead>
<tr>
<td>文件名</td>
<td>文件大小</td>
<td>已上传大小</td>
<td>相对路径</td>
<td>md5</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- <script src="jquery-1.8.3.min.js"></script>-->
<script src="jquery1.11.1.min.js"></script>
<script src="spark-md5.min.js"></script>
<script>
const root = '';
const breakPointFiles = root + '/breakPointFiles'; // 获取断点文件列表
const fileMetaData = root + '/fileMetaData'; // 新上传文件元数据，secUpload 属性用于判断是否可以秒传
const uploadPart = root +'/uploadPart'; // 分片上传，每片的上传接口
const checkIntegrity = root + '/checkIntegrity'; // 检查文件完整性
const fileInfoPos = root + '/fileInfoPos'; // 获取系统中所有已经上传的文件(调试)
const shardSize = 1024 * 1024 * 2; // 分片上传，每片大小 2M
const chunkSize = 1024 * 1024 * 4; // md5 计算每段大小 4M
const statusInfoMap = {'0':'待上传','1':'正在计算','2':'正在上传','3':'上传成功','4':'上传失败','5':'暂停上传','6':'文件检查'};
let uploadFiles = {}; //用于存储当前需要上传的文件列表 fileName=>fileInfo
$(function () {
// 用于调试 begin 加载系统中已经上传过的文件列表
$.ajax({
type:'get',
url:fileInfoPos,
dataType:'json',
success:function (res) {
let htmlCodes = [];
for(let i=0;i<res.length;i++){
htmlCodes.push('<tr>');
htmlCodes.push('<td>'+res[i].name+'</td>');
htmlCodes.push('<td>'+res[i].size+'</td>');
htmlCodes.push('<td>'+res[i].uploaded+'</td>');
htmlCodes.push('<td>'+res[i].relativePath+'</td>');
htmlCodes.push('<td>'+res[i].md5+'</td>');
htmlCodes.push('</tr>')
}
$('table').append(htmlCodes.join(''))
}
})
// 用于调试 end
// 事件绑定
$('#file').change(changeFiles); // 选择文件列表事件
$('#startUpload').click(beginUpload); // 开始上传
$('#uploadfiles').on('change','input[type=file]',breakPointFileChange); // 断点文件选择事件
// 初始化时加载断点文件
(function () {
$.ajax({
type:'get',
url:breakPointFiles,
dataType:'json',
success:function (files) {
if(files && files.length > 0){
for (let i=0;i<files.length;i++){
let fileId = id();
let process = parseFloat((files[i].uploaded / files[i].size ) * 100).toFixed(2);
$('#uploadfiles').append(templateUploadItem(fileId,files[i],process,5,'断点续传',i+1));
uploadFiles[fileId] = {fileInfo:files[i],status:5};
}
}
}
})
})(window);
/**
* 文件重新选择事件
* @param e
*/
function changeFiles(e) {
// 检测文件列表是否符合要求，默认都符合
if(this.files.length == 0){return ;}
// 先把文件信息追加上去，不做检查也不上传
for (let i = 0; i < this.files.length; i++) {
let file = this.files[i];
let fileId = id();
$('#uploadfiles').append(templateUploadItem(fileId,file,0,0,''));
uploadFiles[fileId] = {file:file,status:0};
}
}
/**
* 断点文件选择文件事件
*/
function breakPointFileChange(e) {
let fileId = $(e.target).closest('li').attr('fileId');
if(this.files.length > 0){
uploadFiles[fileId].file = this.files[0];
}
}
/**
* 开始上传
*/
function beginUpload() {
// 先对每一个文件进行检查，除断点文件不需要检查外
// console.log(uploadFiles);
for(let fileId in uploadFiles){
// 如果断点文件没有 file 信息，直接失败
if(uploadFiles[fileId].status == 5 && !uploadFiles[fileId].file){
//断点文件一定有 fileInfo
let fileInfo = uploadFiles[fileId].fileInfo;
let $li = $('#uploadfiles').find('li[fileId='+fileId+']');
$li.children('.upload-status').text('上传失败');fileInfo.status = 4;
$li.children('.tips').text('无文件信息');
continue;
}
if(uploadFiles[fileId].status == 5){
//如果断点文件有 file 信息，则可以直接断点续传了
let $li = $('#uploadfiles').find('li[fileId='+fileId+']');
$li.children('.upload-status').text('正在上传');uploadFiles[fileId].status = 2;
startUpload(uploadFiles[fileId],$li);
continue;
}
//其它待上传的文件，先后台检查文件信息，再上传
if(uploadFiles[fileId].status == 0){
let $li = $('#uploadfiles').find('li[fileId='+fileId+']');
uploadFiles[fileId].status = 1; $li.children('.upload-status').text('正在计算') //正在计算
checkFileItem(uploadFiles[fileId].file,function (res) {
if(res.message && res.message == 'fail'){
$li.children('.upload-status').text(res.returnCode || '上传出错');uploadFiles[fileId].status = 4;
}else{
uploadFiles[fileId].fileInfo = res;
if(res.secUpload){
$li.children('.upload-status').text('文件秒传');uploadFiles[fileId].status = 3;
$li.children('.upload-process').text('100 %');
}else{
$li.children('.upload-status').text('正在上传');uploadFiles[fileId].status = 2;
startUpload(uploadFiles[fileId],$li);
}
}
});
}
}
/**
* 计算 md5 值，请求后台查看是否可秒传
*/
function checkFileItem(file,callback) {
md5Hex(file,function (md5) {
$.ajax({
type:'get',
async:false,
url:fileMetaData,
data:{originFileName:file.name,fileSize:file.size,md5:md5},
dataType:'json',
success:callback
});
});
}
/**
* 开始正式上传单个文件
* */
function startUpload(uploadFile,$li) {
let file = uploadFile.file;
let offset = uploadFile.fileInfo.uploaded || 0;
let shardCount =Math.ceil((file.size - offset )/shardSize);
for(var i=0;i<shardCount;i++){
var start = i * shardSize + offset;
var end = Math.min(file.size,start + shardSize );//在file.size和start+shardSize中取最小值，避免切片越界
var filePart = file.slice(start,end);
var formData = new FormData();
formData.append("file",filePart,uploadFile.fileInfo.name || uploadFile.fileInfo.originFileName);
formData.append('relativePath',uploadFile.fileInfo.relativePath);
$.ajax({
async:false,
url: uploadPart,
cache: false,
type: "POST",
data: formData,
dateType: 'json',
processData: false,
contentType: false,
success:function (uploaded) {
//进度计算
let process = parseFloat((uploaded / file.size) * 100).toFixed(2);
console.log(file.name+'|'+process);
$li.find('.upload-process').text(process + '%');
// 视觉进度
// $('.upload-item').append("<style>.upload-item::before{ width:"+(process * 1000)+ "% }</style>");
if(uploaded == file.size){
// 上传完成后，检查文件完整性
$li.children('.upload-status').text('文件检查');
$.ajax({
type:'get',
async:false,
url:checkIntegrity,
data:{fileName:uploadFile.fileInfo.name || uploadFile.fileInfo.originFileName,fileSize:uploaded,relativePath:uploadFile.fileInfo.relativePath},
success:function (res) {
if(res.message != 'fail'){
$li.children('.upload-status').text('上传成功');
}else{
$li.children('.upload-status').text('上传失败');
$li.children('.tips').text(res.returnCode);
}
}
})
}
}
});
}
}
}
/**
* 创建模板 html 上传文件项
* @param fileName
* @param process
* @param status
* @param tips
* @returns {string}
*/
function templateUploadItem(fileId,fileInfo,process,status,tips,breakPoint) {
let htmlCodes = [];
htmlCodes.push('<li class="upload-item" fileId="'+fileId+'">');
htmlCodes.push('<span class="file-name">'+(fileInfo.name || fileInfo.originFileName)+'</span>');
htmlCodes.push('<span class="file-size">'+(fileInfo.size)+'</span>');
htmlCodes.push('<span class="upload-process">'+process+' %</span>');
htmlCodes.push('<span class="upload-status" >'+statusInfoMap[status+'']+'</span>');
htmlCodes.push('<span class="tips">'+tips+'</span>');
if(breakPoint){
htmlCodes.push('<input type="file" name="file" style="margin-left: 10px;"/>');
}
htmlCodes.push('</li>');
return htmlCodes.join('');
}
/**
* 计算 md5 值(同步计算)
* @param file
*/
function md5Hex(file,callback) {
let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
spark = new SparkMD5.ArrayBuffer(),
fileReader = new FileReader();
fileReader.onload = function (e) {
spark.append(e.target.result); // Append array buffer
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
let hash = spark.end();
callback(hash);
}
}
fileReader.onerror = function () {
console.warn('md5 计算时出错');
};
function loadNext(){
var start = currentChunk * chunkSize,
end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
}
function id() {
return Math.floor(Math.random() * 1000);
}
});
</script>
</body>
</html>源码位置： https://gitee.com/sanri/example/tree/master/test-mvc
一点小推广
创作不易，希望可以支持下我的开源软件，及我的小工具，欢迎来 gitee 点星，fork ，提 bug 。
Excel 通用导入导出，支持 Excel 公式
博客地址：https://blog.csdn.net/sanri1993/articlehttps://img.qb5200.com/download-x/details/100601578
gitee：https://gitee.com/sanri/sanri-excel-poi
使用模板代码 ，从数据库生成代码 ，及一些项目中经常可以用到的小工具
博客地址：https://blog.csdn.net/sanri1993/articlehttps://img.qb5200.com/download-x/details/98664034
gitee：https://gitee.com/sanri/sanri-tools-maven
加载全部内容