本文用于整理记录大文件分片上传、断点续传、极速秒传的Java版简单实现。
1. 分片上传
分片上传的核心思路:
1.将文件按一定的分割规则(静态或动态设定,如手动设置20M为一个分片),用slice分割成多个数据块。
2.为每个文件生成一个唯一标识Key,用于多数据块上传时区分所属文件。
3.所有分片上传完成,服务端校验合并标识为Key的所有分片为一个最终文件。
分片上传到意义:
将文件分片上传,在网络环境不佳时,可以对文件上传失败的部分重新上传,避免了每次上传都需要从文件起始位置上传到问题。
分片的附带好处还能很方便的实现进度条。
1.2 实例
本代码基于Vue + SpringBoot 简单演示,篇幅有限仅放出关键代码,完整代码可在文章最后获取。
该实例是一个串行上传分片数据的实例,一个文件仅在数据库中保存了一条记录,每次上传一个分片时更新一次该记录,直到该文件到所有分片上传完成。
1.2.3 Vue
1.2.3.1 template
模板部分包含一个“上传”Button ,和一个隐藏的 。
点击 Button 触发 input从而选择文件并上传。
{ {text}}
1.2.3.2 selectFile
点击 Button 【上传】,触发 隐藏 input 的点击事件,选择文件。
/**
* 点击【上传】
*/
selectFile () {
let _this = this;
$("#" + _this.inputId + "-input").trigger("click");
},
1.2.3.3 uploadFile
检测到选择好文件,input 执行该方法,完成文件上传。
/**
* 上传文件
*/
uploadFile() {
let _this = this;
// 1. 获取 input 中被选中的文件
let file = _this.$refs.file.files[0];
// 2. 生成文件标识,标识多次上传的是不是同一个文件
let key = hex_md5(file.name + file.size + file.type);
let key10 = parseInt(key, 16);
let key62 = Tool._10to62(key10);
// 判断文件格式 (非必选,根据实际情况选择是否需要限制文件上传类型)
let suffixs = _this.suffixs;
let fileName = file.name;
let suffix = fileName.substring(fileName.lastIndexOf(".")+1, fileName.length).toLowerCase();
if(!(!suffixs || JSON.stringify(suffixs) === "{}" || suffixs.length === 0)) {
let validateSuffix = false;
for(let s of suffixs) {
if(s.toLocaleLowerCase() === suffix) {
validateSuffix = true;
break;
}
}
if(!validateSuffix) {
Toast.warning("文件格式不正确!只支持上传:" + suffixs.join(","));</