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

不才 等级 750 1 0
标签: httpsJavascript

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

前端流程图

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

主要技术点

切片

  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

收藏
评论区

相关推荐

HTTPS
### 最近网站更新为https,于是做个笔记 ### 将域名 [www.domain.com](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.domain.com) 的证书文件1\_www.domain.com\_bundle.crt 、 ### 私钥文件2\_www.doma
HTTPS
楔子 谣言粉碎机前些日子发布的《[用公共WiFi上网会危害银行账户安全吗?](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.guokr.com%2Farticle%2F100110%2F)》,文中介绍了在使用HTTPS进行网络加密传输的一些情况,从回复来看,争议还是有的。随着网络越
HTTPS请求
##HTTPS请求## > **HttpsUtils代码** package com.ices.utils.httpsHelp; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader;
Console Api 让 JS 调试更简单、高效
> 所有Console Api  <script type="text/javascript"> console.dir(console); </script> ![](https://oscimg.oschina.net/oscnet/95a860f3d4ec5a09ee3f53761b64594745e.jpg)
Fundebug前端异常监控插件兼容低版本的Android浏览器
![](https://image.fundebug.com/2019-06-03-fundebug-javascript-upgrade.jpg) ### Fundebug前端BUG监控服务 [Fundebug](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.fundebug
JavaScript中8个常见的陷阱
**译者按:** 漫漫编程路,总有一些坑让你泪流满面。 原文: [Who said javascript was easy ?](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fhackernoon.com%2Fwho-said-javascript-easy-f4a1d5b399b8)
JavaScript动画实例:李萨如曲线
        在“[JavaScript图形实例:阿基米德螺线](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwenku.baidu.com%2Fview%2F5c4a2dfb152ded630b1c59eef8c75fbfc77d94cf)”和“[JavaScript图形实例:曲线方
JavaScript在物联网中的应用
> 凡是能用JavaScript写出来的,最终都会用JavaScript写出来。 —— Atwood定律 在那篇《[最流行的编程语言JavaScript能做什么?](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMjM5Mjg
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript实现强制重定向至HTTPS页面
有时候需要把网页强制切换成HTTPS,即使用户已经访问了HTTP的版本。原因可能是你不想让用户使用HTTP来访问,因为它不安全。要做到这个很简单,如果不想用PHP或者[Apache的mod\_rewrite](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.jb51.net%2Far
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
Javascript相关学习
JavaScript ---------- 发现了一个不错的学习JavaScript的网站,就是MDN,具体见[JavaScript 参考](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaS
PhotoShop脚本指南
**Photoshop脚本语言** Photoshop支持三种脚本语言:AppleScript,VBScript,JavaScript。其中AppleScript为苹果系统,VBScript为Windows操作系统,JavaScript兼容苹果和Windows操作系统。 ![](https://oscimg.oschina.net/oscnet/up-2