大文件分块(切片)断点上传

不才
• 阅读 1162

之前看过相关文章但是一直没有动手实现,这个东西就是为了实现这个而产生的。

前端流程图

大文件分块(切片)断点上传

主要技术点

切片

  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: 切片id
index: 下标
file: 切片数据
parent: 文件容器id
ResData
{
  "code":200
}

异步请求优化

使用async mapLimit限制异步任务数量,避免一次性请求数量过多后导致进行中的请求过多,避免中断的时候浪费资源过多

// 控制异步并发,避免块数量过多失败的时候导致成功数量变少
// 限制并发为3个
async.mapLimit(blocks, 3, async (file, callback) => {
  // 调用上传 块
  await uploadBlcok(file);
}, async () => {
  // 单任务执行完成后获取当前文件状态,可在这里获取文件地址
});

如何运行

  1. 安装依赖
    npm install
  2. 运行
    npm run dev
  3. 浏览器打开
    http://127.0.0.1:9870

相关资料

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

end

blog

https://github.com/notbucai/examples

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
6天前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。 language JavaScript "name": "vuecliversion2", "version": "1.0.0", "desc
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。 1、使用解构获取json数据let jsonData   id: 1, status: "OK", data: ['a', 'b'] ; let  id, status, data: number   jsonData; console.log(id, status, number )
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
小森森 小森森
6天前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本 欢迎添加左边的微信一起探讨!项目地址:](https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n) \2. Bug修复更新日历 2. 情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意), \ \ 和 注意
Karen110 Karen110
1年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:Thu Feb 02 2019 09:59:51 GMT+0800 (中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。 1\. 显示日期使用
Stella981 Stella981
11个月前
Android So动态加载 优雅实现与原理分析
> 背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载. ![](https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png) 点击上方“蓝字”关注我
Easter79 Easter79
11个月前
Twitter的分布式自增ID算法snowflake (Java版)
概述 == 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。 有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。 而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
11个月前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序 select * from table_name order id desc; 2.按照指定(多个)字段排序 select * from table_name order id desc,status desc; 3.按照指定字段和规则排序 selec
Wesley13 Wesley13
11个月前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
#### 背景描述 # Time: 2019-01-24T00:08:14.705724+08:00 # User@Host: **[**] @ [**] Id: ** # Schema: sentrymeta Last_errno: 0 Killed: 0 # Query_time: 0.315758 Lock_
helloworld_34035044 helloworld_34035044
2个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为