之前看过相干文章然而始终没有入手实现，这个货色就是为了实现这个而产生的。

前端流程图

次要技术点

切片

  1. 利用 Blob.prototype.slice 切片
  2. 获取切片md5 作为惟一标识

具体代码

// 计算切片数量const page = Math.ceil(file.size / size);// 初始地位let start = 0;// 期待的异步工作队列const promiseList = [];for (let i = 0; i < page; i++) {  // 计算以后切片的终止地位  const end = start + size;  const item = file.slice(start, end);  // 更新 开始地位  start = end;  // 生成单个块 （异步）  // const block = generateItemBlock(item, i);  const block = {    key:md5, // md5    index:i, // index    data: item // 切片数据  };}

合并

读取切片文件获取文件Buffer
利用Buffer.concat([b1,b2])合并切片

/** * 合并切片成文件 * @param {String} filename 文件名 * @param {Array} keys 切片id（长期文件名）列表 */async function mergeFile (filename, keys) {  const readFile = util.promisify(fs.readFile);  // 读取文件  const files = keys.map(key => {    return readFile(path.join(__dirname, '../files/', key));  });  // 异步期待后果  const filesBuffer = await Promise.all(files);  // NOTE: 合并切片  const buffer = Buffer.concat(filesBuffer);  // 写入  fs.writeFileSync(path.join(__dirname, '../files/', filename), buffer);  // 移除切片文件  keys.forEach(key => {    fs.unlink(path.join(__dirname, '../files/', key), function (err) {      if (err) {        throw err;      }    })  });}

文件容器治理

应用lowdb存储文件信息，应用文件md5作为文件id

接口介绍

POST /fileStatus 接口
ReqData
{  "key": "", // 文件Md5  "length": 0, // 切片数量  "name": "" // 文件名称}
ResData
{  "key": "", // 文件Md5  "length": 0, // 切片数量  "filename": "", // 文件名称  "blocks": [], // 已实现的切片列表  "url"?: "" // 文件M地址}

容器数据格式

{  "key": "", // md5  "length": 0, // 切片数量  "filename": "", // 文件名  "blocks": []  // 已实现切片数量}

切片信息

{  "index": 0, // 切片下标  "key": ""  // 切片 md5 我这里作同时作为切片文件名}

切片治理

切片上传胜利后须要治理标示，依据切片下标判断切片地位，通过文件容器判断切片上传状态，再将切片整合

接口介绍

POST /uploadBlock 接口
ReqData
Form Data
key: 切片idindex: 下标file: 切片数据parent: 文件容器id
ResData
{  "code":200}

异步申请优化

应用async mapLimit限度异步工作数量，防止一次性申请数量过多后导致进行中的申请过多，防止中断的时候浪费资源过多

// 管制异步并发,防止块数量过多失败的时候导致胜利数量变少// 限度并发为3个async.mapLimit(blocks, 3, async (file, callback) => {  // 调用上传 块  await uploadBlcok(file);}, async () => {  // 单任务执行实现后获取以后文件状态，可在这里获取文件地址});

如何运行

  1. 装置依赖
npm install
  1. 运行
npm run dev
  1. 浏览器关上
http://127.0.0.1:9870

相干材料

浏览器文件MD5加密
async mapLimit
前端大文件上传

end

blog

https://github.com/notbucai/examples