大文件批量上传断点续传文件秒传
接上篇文章 java 超大文件分片上传 在其基础上继续实现 断点续传和文件秒传功能html
在上篇中，咱们可使用 file. slice 方法对文件进行分片，能够从后台读到当前文件已经上传的大小，就能够知道从哪里开始切片，断点续传的原理就是基于这个的。前端
前端计算文件的 md5 ，后台数据库查询一遍（前提是把 md5 存储了，计算文件 md5 也是须要消耗时间的）便可知道是否有相同文件，这是实现文件秒传的方法。java
可能存在的问题：jquery
- 有两我的同时在上传同一个文件，但前一我的尚未上传完成，此时第二个文件认为是新文件不能秒传
- 此时获取文件原数据时须要将文件信息保存起来，重点是要保存 md5 ，保证一个文件的 md5 保计算一次
- 获取断点文件时，真实的文件上传位置应该是从文件系统中读出来的
根据需求说明，后台应该存在四个接口，获取文件信息（包含是否能够秒传），获取断点文件列表，分片上传接口，文件完整性验证git
所有源码位置 ： https://gitee.com/sanri/example/tree/master/test-mvcweb
/**
* 加载断点文件列表
* @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.jsajax
<!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 。json
Excel 通用导入导出，支持 Excel 公式
博客地址：https://blog.csdn.net/sanri1993/article/details/100601578
gitee：https://gitee.com/sanri/sanri-excel-poimvc
使用模板代码 ，从数据库生成代码 ，及一些项目中常常能够用到的小工具
博客地址：https://blog.csdn.net/sanri1993/article/details/98664034
gitee：https://gitee.com/sanri/sanri-tools-maven
相关文章
- 1. 大文件上传第二弹(分片、秒传、断点续传)
- 2. 大文件分片上传，断点续传，秒传 实现
- 3. 断点续传、大文件上传、秒传、webuploader
- 4. 文件上传控件-如何上传文件-大文件断点续传
- 5. VUE-多文件断点续传、秒传、分片上传
- 6. 大文件断点续传
- 7. html5文件上传断点续传
- 8. 文件上传包含( 断点续传)
- 9. js实现大文件上传分片上传断点续传
- 10. 大文件上传优化，断点续传，分片上传
- 更多相关文章...
- • PHP 文件上传 - PHP教程
- • R XML 文件 - R 语言教程
- • Flink 数据传输及反压详解
- • Docker容器实战(七) - 容器眼光下的文件系统
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章