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

不才 等级 422 1 0

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

前端流程图

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

主要技术点

切片

  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

收藏
评论区

相关推荐

What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
Canvas入门实战之用javascript面向对象实现一个图形验证码
本文主要介绍用canvas实现图形验证码的一些思路以及如何用javascript面向对象的方式更友好的实现canvas的功能,关于canvas的一些基本使用方法和API我整理了一个思维导图,大家感兴趣的可以参考学习。 (https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b158fad95
《前端实战总结》之使用解释器模式实现获取元素Xpath路径的算法
前端领域里基于javascript的设计模式和算法有很多,在很多复杂应用中也扮演着很重要的角色,接下来就介绍一下javascript设计模式中的解释器模式,并用它来实现一个获取元素Xpath路径的算法。 上期回顾 《前端实战总结》之迭代器模式的N1种应用场景(https://juejin.im/post/6844904008616771591)
Cors跨域解决
一、浏览器跨域问题产生 1、跨源资源共享(CORS)中文文档: https://developer.mozilla.org/zhCN/docs/Web/HTTP/Access_control_CORS 2、什么是浏览器跨域问题 指的是浏览器不能执行其他网站的脚本。JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源策略。就好比我
Hook 规则 – React
Hook 规则 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件(https://www.npmjs.com/package/
舒文:浅谈阿里前端的多样化
2007年,Jeff Atwood 提出了一个著名的观点, 戏谑又似认真地称其为 Atwood's Law(https://blog.codinghorror.com/theprincipleofleastpower/): _any application that can be written in JavaScript, will event
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
JavaScript中本地存储的方式有哪些?
(https://imghelloworld.osscnbeijing.aliyuncs.com/1f907f0895e2be23aa56604dd42e3626.png) 一、方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage loc
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s
Webpack学习整理集锦【从最基础的demo入手,自己实现一个脚手架 】
前言本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。开源网址https://github.com/maomi
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti