一、初衷、想法
今年上半年的时候写了一个文件切片的库(凭空想象写的，没有结合实际项目开发)，近期在使用的时候发现有些功能并没有考虑周全，然鹅花了这周六日来重写🥺
之前的思路是，传入文件及对应的fileKey，然后根据byte来进行切片，切一片发送一片，直到全部发送完毕，执行callback，当时只考虑到了单个文件切片上传。
现在的思路，先全部切片完后再上传，对比后端返回的当前文件还有哪些切片未被上传(实现断点续传)，多个文件上传，如果单个切片上传失败单个切片自动进行三次上传请求，所有文件全部上传成功后，再执行callback。over。
其实文件切片及断点续传并不难，最重要的是有思路，然后将自己的思路用代码实现。over。(编程中的任何事情都一样，最重要的是要有思路。)
这篇博客只会抛出代码及部分重要注释，拒绝做复制侠，里面的逻辑并不复杂。
二、后端需要提供的两个接口
2.1 查询当前文件是否已经存在
对前端用户而已来说：提升用户体验、加快文件传输速度
对后端服务来说：减少不必要的带宽占用和磁盘空间的浪费
如果已经存在就不再继续上传该文件，如何判断当前文件是否已存在。唯一id： md5
这里的md5转成了62进制，因为16进制比较长。
2.2 上传文件
将切片文件上传给服务器，服务器进行合成。
三、生成md5+文件切片库
import Vue from 'vue';
import SparkMD5 from 'spark-md5'
// 思路
/**
* 首先将对传入的文件做MD5加密，根据加密后的MD5查询这个文件是否已被上传过，
* 查询这个文件是否“部分”切片被上传，还有哪些切片未被上传，对文件进行切片(根据大小或数量切片)
* 返回切片数组
*/
class SectionFileNew {
// 文件md5加密
getFileMD5 = (file: File, callback?: Function) => {
const spark = new (SparkMD5 as any)(),
fileReader = new FileReader();
const ops = () => new Promise(resolve => {
fileReader.readAsBinaryString(file)
fileReader.onload = function (e: any) {
spark.appendBinary(e.target.result)
const md5key = spark.end()
resolve(md5key)
callback && callback(md5key)
}
})
async function invoke() {
return await ops()
}
return invoke()
}
// 16进制转62进制
string16to62 = (val: any) => {
val = parseInt(val, 16)
let chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ'.split(''),
radix = chars.length,
qutient = +val,
arr = [];
do {
const mod = qutient % radix;
qutient = (qutient - mod) / radix;
arr.unshift(chars[mod]);
} while (qutient);
return arr.join('');
}
// 文件切片
/**
* chunkByteSize 字节 默认0.5兆
*/
sectionFile = async (file: File, callback: Function, chunkByteSize = 524288, callbackFileType = "file") => {
chunkByteSize = chunkByteSize ? chunkByteSize : 524288;
// 计算该文件的可分为多少块
const chunks: any = Math.ceil(file.size / chunkByteSize);
let sectionFileArray = []
if (chunks === 1) {
sectionFileArray.push(file)
return callback && callback(sectionFileArray, chunks, this.string16to62(await this.getFileMD5(file)))
}
// 当前切片
for (let i = 0; i < chunks; i++) {
const start = i * chunkByteSize,
end = Math.min(start + chunkByteSize, file.size)
const blob = file.slice(start, end);
// blob 转 file
let res = callbackFileType === "file" ? new window.File([blob], file.name, { type: file.type }) : blob;
sectionFileArray.push(res)
}
callback && callback(sectionFileArray, chunks, this.string16to62(await this.getFileMD5(file)))
}
}
export default function () {
Vue.prototype.$sectionFileNew = SectionFileNew
}
export const sectionFileFnNew = SectionFileNew;
四、结合项目封装库
import Vue from "vue"
import { sectionFileFnNew } from "./indexNew"
import { sectionToUpload, checkHash } from "@/api/http/sectionToUpload";
export default function () {
class ProjectFileUploadNew {
private section = new (sectionFileFnNew as any)()
constructor() { }
/**
* 项目级单个文件上传
* file：文件
* fileKey：对应上传的key
* callback：回调
*/
projectFileSection = async (file: File, fileKey: string, callback?: Function): Promise<object> => {
return new Promise(async resolve => {
await this.section.getFileMD5(file, (md5: string) => {
// 检查该文件是否存在此hash
checkHash({
hash: this.section.string16to62(md5),
fnRes: (res: any) => {
// 接口返回正常
if (res.code == 0 && res.data) {
const { spiltChunkSize, uploadedSuccess, supportChunkUpload, nextChunkIndexs } = res.data;
// 文件未存在 并且支持分片上传
this.fileSection(file, async (fileArr: Array<File>, allChunks: number, md5Keyto62: string) => {
// 不支持分片上传 且 该文件未被上传
if (!supportChunkUpload && !uploadedSuccess) {
}
// 需要文件上传的切片数组
let uploadArr = this.needUploadSectionFileParameters(file, fileArr, allChunks, md5Keyto62)
// 断点续传
if (nextChunkIndexs) {
uploadArr = this.breakpointResume(uploadArr, nextChunkIndexs)
}
// 文件已存在 无需再次上传
if (uploadedSuccess) {
const res = {
md5Keyto62, // md5
fileKey,
nextChunkIndexs: [] // 未上传的切片
}
resolve(res)
return callback && callback(res)
}
// 开始上传
await this.toupload(uploadArr, fileKey, (arr: Array<object>) => {
const res = {
md5Keyto62,
fileKey,
nextChunkIndexs: arr
}
resolve(res)
callback && callback(res)
})
}, spiltChunkSize)
}
}
});
})
})
}
// 项目级多个文件上传
projectFileSectionMultiple = async (fileArr: Array<any>, callback?: Function) => {
if (fileArr.length === 0) return;
const res: any = []
for (let i = 0; i < fileArr.length; i++) {
res.push(await this.projectFileSection(fileArr[i].file, fileArr[i].filekey))
}
return new Promise(resolve => resolve(res));
}
/**
* 文件切片
* file：文件
* callback：回调 参数(切片后的数组、总共切片数量、62进制的md5)
* chunkByteSize：切片大小
*/
fileSection = (file: File, callback: Function, chunkByteSize?: number | null) => {
this.section.sectionFile(file, callback, chunkByteSize)
}
/**
* 需要上传的切片文件参数整理
* sectionFile：切片文件
* allChunks：总切片数
* md5Keyto62：文件加密后的md5(已转62进制)
*/
needUploadSectionFileParameters = (file: File, sectionFile: Array<File>, allChunks: number, md5Keyto62: string): Array<object> => {
const resParametersArr: Array<object> = []
// 整理请求参数
sectionFile.forEach((v: any, i: number) => {
const parameter: any = {}
parameter.fileKey = md5Keyto62;
parameter.file = v;
parameter.fileInfo = {
// 文件名称
name: v.name,
// 文件后缀
suffix: v.type.substring(v.type.lastIndexOf("/") + 1).toLowerCase(),
// 文件大小
size: file.size,
use: md5Keyto62,
// 分片索引
shardIndex: i + 1,
// 分片大小
shardSize: v.size,
// 总分片数
shardTotal: allChunks,
// 文件md5处理后的key 已转62进制
key: md5Keyto62
}
resParametersArr.push(parameter)
})
return resParametersArr
}
/**
* 断点续传 整理已经上传过的文件
* file：文件数组
* nextChunkIndexs：剩余需要上传的文件块索引
*/
breakpointResume = (fileArr: Array<object>, nextChunkIndexs: Array<number>) => {
const resArr: Array<object> = []
fileArr.forEach((v: any) => {
if (nextChunkIndexs.find(index => index == (v.fileInfo.shardIndex))) {
resArr.push(v)
}
})
return resArr;
}
// 切片开始上传
toupload = async (uploadArr: Array<object>, filekey: string, callback: Function,) => {
// 反转数组
uploadArr.reverse();
for (let i = uploadArr.length - 1; i >= 0; i--) {
// 当前上传未成功 执行三遍 如果三次未成功跳出失败循环 执行下一次
for (let j = 0; j < 3; j++) {
const res: any = await this.sendToUpload(uploadArr[i], filekey)
if (res.code == 0) {
uploadArr.splice(i, 1)
break;
}
}
}
callback && callback(uploadArr)
}
// 发送上传请求
sendToUpload = (data: object, filekey: string) => {
return new Promise(resolve => {
sectionToUpload({
data,
filekey,
fnRes: (res: any) => {
resolve(res);
}
});
});
}
}
Vue.prototype.$projectFileUploadNew = ProjectFileUploadNew;
}
五、使用
- 单个文件使用
const section = new (this as any).$projectFileUploadNew();
section
.projectFileSection((this.$refs as any).file.files[0], "imageForTest")
.then((val: string) => {
// 获取md5 key
console.log("md5", val);
});
- 多个文件使用
const fileArr: Array<object> = [];
(this.$refs as any).fileMultiple.files.forEach((v: any, i: number) => {
fileArr.push({
filekey: "test" + (i + 1),
file: v,
});
});
const section = new (this as any).$projectFileUploadNew();
section.projectFileSectionMultiple(fileArr).then((val: Array<object>) => {
console.log("多张文件一起上传", val);
});
