JS利用Worker多线程大文件切片上传

已于 2024-03-01 19:45:26 修改
阅读量2k 收藏 14
点赞数 44
分类专栏： Javascript Html / CSS 文章标签： javascript 开发语言 ecmascript
于 2024-03-01 19:40:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vue2018/article/details/136397929
版权

在做前端上传时，会遇到上传大文件，大文件就要进行分片上传，我们整理下思路，实现一个分片上传，最终我们要拿到每一个分片的hash值，index 分片索引，以及分片blob，如下：
在这里插入图片描述

一、实现切片

index.html: 我们先创建一个html文件，用于处理选择文件，进而分片，这里利用spark-md5获取文件hash值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件分片</title>
</head>
<body>
<input type="file" id="input"></input>
<script type="module">
  import { createChunk } from './main.js'

  document.getElementById('input').onchange = event => {
    let files = event.target.files
    if (files.length) {
      // 进行分片
      createChunk(files[0])
    }
  }
</script>
</body>
</html>

main.js： 默认一个分片5M，这里要向上取整，计算出分片数量

import SparkMD5 from 'https://esm.sh/spark-md5@3.0.2'

const CHUNK_SIZE = 1024 * 1024 * 5 // 分片大小5M

/**
 * @description 进行分片
 * @param {Object} file: 当前要处理的任务对象
 */
function createChunk(file) {
  // 计算分片数量
  let count = Math.ceil(file.size / CHUNK_SIZE)
  console.log(count)
}

在这里插入图片描述
然后循环处理

/**
 * @description 进行分片
 * @param {Object} file: 当前要处理的任务对象
 */
function createChunk(file) {
  // 计算分片数量
  let count = Math.ceil(file.size / CHUNK_SIZE)
  for (let i = 0; i < count; i++) {
    // 分片
    splitChunk(file, i, CHUNK_SIZE)
  }
}

对文件进行切片，利用file.slice(start, end)对文件进行切片处理

/**
 * @description 切片
 * @param {Object} file: file对象
 * @param {Number} i: 当前处理的第几个任务
 * @param {Number} size: 一个切片的大小
 */
function splitChunk(file, i, size) {
   let start = i * size
   let end = (i + 1) * size
   let blob = file.slice(start, end)
   console.log(blob)
}

可以看到，切为若干份
在这里插入图片描述

然后获取切片的hash值，并且记录切片的起始/结束位置和切片索引index，最终返回promise

/**
 * @description 切片
 * @param {Object} file: file对象
 * @param {Number} i: 当前处理的第几个任务
 * @param {Number} size: 一个切片的大小
 */
function splitChunk(file, i, size) {
  return new Promise((resolve, reject) => {
    let start = i * size
    let end = (i + 1) * size
    let blob = file.slice(start, end)
    // 获取文件hash值
    getFileHash(blob)
      .then(res => {
        resolve({
          blob: blob,
          start,
          end,
          index: i,
          hash: res
        })
      })
  })
}

/**
 * @description 获取文件hash值
 * @param {Object} file: 源文件信息
 */
function getFileHash(file) {
  let spark = new SparkMD5.ArrayBuffer()
  return new Promise(function (resolve, reject) {
    let fileReader = new FileReader()

    fileReader.onload = function (e) {
      let buffer = e.target.result
      if (file.size != buffer.byteLength) {
        reject("获取文件hash失败，按理说不可能");
      } else {
        spark.append(buffer) // 解析 Buffer
        resolve(spark.end())
      }
    };

    fileReader.onerror = function () {
      reject("文件初始化读取Buffer失败");
    };

    fileReader.readAsArrayBuffer(file);
  });
}

然后对返回的结果进行批处理，这里我们可以打印下处理的时间

/**
 * @description 进行分片
 * @param {Object} file: 当前要处理的任务对象
 */
function createChunk(file) {
  let promises = []
  console.time('splitChunk')
  // 计算分片数量
  let count = Math.ceil(file.size / CHUNK_SIZE)
  for (let i = 0; i < count; i++) {
    // 分片
    promises.push(splitChunk(file, i, CHUNK_SIZE))
  }
  Promise.all(promises)
    .then(res => {
      console.log(res)
      console.timeEnd('splitChunk')
    })
}

可以看到，处理了4秒左右，主要是花费在处理文件hash上，获取文件hash为同步任务，且占用主线程，这对于单线程的js来讲，如果文件过大，会影响当前用户的使用体验
在这里插入图片描述

二、多线程优化

上面我们已经实现切片，但是如果文件过大，带来的影响较大，所以我们可以利用js Worker进行多线程优化，这里我们判断客户端的cpu内核数量，进而开启对应数量的线程

利用浏览器navigator.hardwareConcurrency获取当前cpu内核数量，可以看到，本机的内核数为8
在这里插入图片描述
这里处理线程的开启数量

import SparkMD5 from 'https://esm.sh/spark-md5@3.0.2'

const CHUNK_SIZE = 1024 * 1024 * 5 // 分片大小5M
const KERNEL_COUNT = navigator.hardwareConcurrency || 4 // 内核数量，如果取不到则为4

/**
 * @description 进行分片
 * @param {Object} file: 当前要处理的任务对象
 */
function createChunk(file) {
  // 计算分片数量
  let count = Math.ceil(file.size / CHUNK_SIZE)
  // 计算线程开启数量
  let workerCount = Math.ceil(count / KERNEL_COUNT)
    // 计算线程开启数量
  let workerCount = Math.ceil(count / KERNEL_COUNT)
  for (let i = 0; i < workerCount; i++) {
    // 创建一个线程，并且分配任务，这里要指定为module模块化
    let worker = new Worker('./worker.js', { type: "module" })
    // 因为线程数量是向上取整，有除不尽的情况，这里要处理下结束的chunkIndex，如果最后一个chunk大于总chunk数，则写死
    let end = (i + 1) * KERNEL_COUNT
    if (end > count) {
      end = count
    }
    // 分配任务
    worker.postMessage({
      file,
      CHUNK_SIZE,
      startChunkIndex: i * KERNEL_COUNT,
      endChunkIndex: end
    })
    // 接收处理结果
    worker.onmessage = e => {
    
    }
  }
}

多线程查看接收到的任务，一共开启8个线程，进行切片
worker.js:线程worker

// 处理线程收到消息
onmessage = e => {
  let {
    file,
    CHUNK_SIZE,
    startChunkIndex,
    endChunkIndex
  } = e.data
  console.log(file, CHUNK_SIZE, startChunkIndex, endChunkIndex)
}

在这里插入图片描述
worker.js:接下来，我们进行切片，然后返回切片结果

import { splitChunk } from './main'

// 处理线程收到消息
onmessage = async e => {
  let {
    file,
    CHUNK_SIZE,
    startChunkIndex,
    endChunkIndex
  } = e.data
  let promises = []
  for (let i = startChunkIndex; i < endChunkIndex; i++) {
    promises.push(splitChunk(file, i, CHUNK_SIZE))
  }
  let chunks = await Promise.all(promises)
  console.log(chunks)
  postMessage(chunks)
}

打印下，可以看到8个线程各自处理切片，一共57个切片，最后一个线程只有一个切片任务， 7 * 8 + 1 = 57
在这里插入图片描述
main.js:然后我们接收处理结果，然后保存起来，因为这里的线程谁先完事儿是未知数，所以需要特殊处理下：

/**
 * @description 进行分片
 * @param {Object} file: 当前要处理的任务对象
 */
export function createChunk(file) {
  return new Promise(((resolve, reject) => {
    let promises = []
    // 结果
    let result = []
    // 计算分片数量
    let count = Math.ceil(file.size / CHUNK_SIZE)
    // 计算线程开启数量
    let workerCount = Math.ceil(count / KERNEL_COUNT)
    // 当前线程执行完毕的数量
    let finishCount = 0
    for (let i = 0; i < workerCount; i++) {
      // 创建一个线程，并且分配任务
      let worker = new Worker('./worker.js', { type: "module" })
      // 开始
      let start = i * KERNEL_COUNT
      // 因为线程数量是向上取整，有除不尽的情况，这里要处理下结束的chunkIndex，如果最后一个chunk大于总chunk数，则写死
      let end = (i + 1) * KERNEL_COUNT
      if (end > count) {
        end = count
      }
      // 分配任务
      worker.postMessage({
        file,
        CHUNK_SIZE,
        startChunkIndex: start,
        endChunkIndex: end
      })
      // 接收处理结果
      worker.onmessage = e => {
      	// 这里为了避免顺序乱，取当前的执行索引
        for (let i = start; i < end; i++) {
          result[i] = e.data[i - start]
        }
        worker.terminate() // 结束任务
        finishCount ++ // 完成数量++
        if (finishCount === workerCount) {
          resolve(result)
        }
      }
    }
  }))
}

index.html:我们可以打印下结果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件分片</title>
</head>
<body>
<input type="file" id="input"></input>
<script type="module">
  import { createChunk } from './main.js'

  document.getElementById('input').onchange = async event => {
    let files = event.target.files
    if (files.length) {
      console.time('splitChunk')
      // 进行分片
      let res = await createChunk(files[0])
      console.log(res)
      console.timeEnd('splitChunk')
    }
  }
</script>
</body>
</html>

可以看到，效率极大提升，由4秒提升到1秒，最主要不影响用户体验
在这里插入图片描述
在这里插入图片描述
断点续传就更简单了，服务端记录任务进度即可，这里就不说了

前端小小白zyw
关注
专栏目录
JS异步编程——WebWorker多线程机制
zhengjingID的博客
06-11 2490
JS采用的是单线程机制，所有的任务只能在一个线程上完成，前面的任务没有完成就只能等待。随着计算机计算能力的增强，多核处理器的出现，单线程已不能充分的发挥计算机的算力，WebWorker就是给主线程创建多线程的环境，实现主线程运行时，WebWorker线程在后台运行，两者互不干扰，待WebWorker线程任务完成后，将结果返回给主线程。...
自己实现一个大文件切片上传+断点续传
大转转FE
06-07 691
PM：喂，那个切图仔，我这里有个100G的视频要上传，你帮我做一个上传后台，下班前给我哦，辛苦了。我：。。。相信每个切图工程师，都接触过文件上传的需求，一般的小文件，我们直接使用input file，然后构造一个new FormData()对象，扔给后端就可以了。如果使用了 Ant design 或者 element ui 之类的ui库，那更简单，直接调用一下api即...
js 大文件切片，中止上传，上传进度，断点续传
weixin_52041354的博客
10-21 200
本文将介绍如何使用JavaScript实现大文件切片上传，并解释如何处理断点续传、并发控制以及上传取消等问题，用到的知识点有大文件切片、中止上传 、上传进度、断点续传、并发数量控制。大文件切片上传的基本原理是将文件分成多个固定大小的小切片，然后逐个上传到服务器。切片合并： 当所有切片上传完成后，服务器按照索引顺序合并切片（或者后端提供合并接口将hash值传给后端进行合并），还原为完整文件。通过记录已上传切片的索引，即使上传过程中断，也可以从断点处继续上传。服务器只需判断已存在的切片，避免重新上传。
js实现分割上传大文件
10-22
主要为大家详细介绍了js实现分割上传大文件的相关资料,需要的朋友可以参考下
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 1264
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
前端上传大型文件或超长数据的解决办法
weixin_52041354的博客
08-20 1166
最近这块好像挻火的，今天早上又有一位网友加我微信，也是想了解这块的技术和方案，实际上我的微信之前就已经在网上公开了，但是论坛里面很多网友还是不知道。昨天晚上论坛里面有一个网友发私信给我，想和我探讨一下这方面的技术问题，他是刚开始接触这块，以前没怎么接触过，都是做的后端，主要是以数据库操作为主，他也是最近接的一个项目，遇到了大文件上传下载的问题，问我有没有好用的组件，其它的要求没有，主要就是好用，方便。
js大文件切片上传
置酒天晴的博客
10-02 1577
附件分段上传
js实现文件切片上传，断点续传
weixin_45525177的博客
05-20 930
js实现文件切片上传，断点续传，js实现文件切片上传，js实现文件分块上传，js实现文件分片上传，js实现文件加密上传，js实现文件批量上传，js实现文件夹上传，js实现文件切片上传解决方案，js实现文件切片上传思路，js实现文件切片上传源码，js 大文件分割/分片上传，js 大文件分割上传，js 大文件分片上传，js 大文件切片上传，js 大文件分块上传，js 大文件批量上传，js 大文件加密上传，js 大文件断点续传，js 文件夹上传，js 文件夹批量上传，大文件上传测试推荐使用IIS以获取更高性能。
【JS】大文件上传（切片上传）
m0_61049675的博客
03-01 303
大文件上传（切片上传）切片上传文件切片示例 切片上传 切片上传是指将一个大文件切割为若干个小文件，分为多个请求依次上传，后台再将文件碎片拼接为一个完整的文件，即使某个碎片上传失败，也不会影响其它文件碎片，只需要重新上传失败的部分就可以了。而且多个请求一起发送文件，提高了传输速度的上限。 文件切片示例 文件切片和核心是使用 Blob 对象的 slice 方法，File 继承于 Blob。所以我们也可以使用 slice 方法对文件进行切割。
前端大文件上传 + 断点续传解决方案
05-26
`slice()`方法允许我们对Blob进行切片，将大文件分割成多个小块，这是实现断点续传的基础。通过切割文件，我们可以逐个上传块，而不是一次性上传整个文件。 4. **FileReader API**：FileReader接口允许Web应用程序...
前端大文件上传如何实现（文件切片）
青山不改，绿水长流。
10-28 3922
但是大文件的上传是一个特殊的情况： 大文件上传最主要的问题就在于：在一个请求中，要上传大量的数据，导致整个过程会比较漫长，且失败后需要重头开始上传。说明：考虑到如果上传一个超大文件，读取文件内容计算 hash 是非常耗费时间的，并且会引起 UI 的阻塞，导致页面假死状态，所以我们使用 web-worker 在 worker 线程计算 hash，这样用户仍可以在主界面正常的交互。常见的软件应用中，前端/后端都会对一个请求的时间进行限制，那么大文件的上传就会很容易超时，导致上传失败。对象包含一个重要的方法。
＜ JavaScript技术分享： 大文件切片上传 及 断点续传思路 ＞
一个平平无奇的技术宅
01-04 1797
在开发过程中，不管怎样简单的需求，在量级达到一定层次时，都会变得异常复杂。就拿今天要说的文件上传来说，文件上传简单，但是当文件大小变得太大超出控制时，就会变得复杂了！当上传大文件时，会存在以下几个变量会影响我们的用户体验服务器处理数据的能力上传时间会变长，高频次文件上传失败，失败后又需要重新上传等等当遇到网络波动时，大文件上传容错率下降上传文件请求超时为了解决上述问题，我们需要对大文件上传单独处理这里涉及到切片上传及断点续传两个概念。
【JS】基于原生JavaScript的大文件切片上传及断点续传实现
九日的博客
05-15 1462
通过以上步骤，我们实现了一个基本的文件切片上传及断点续传功能。前端通过JavaScript将文件分成多个片段逐一上传，并记录上传进度；后端使用Node.js接收片段并在上传完成后将其合并成一个完整文件。这个实现方案可以根据实际需求进行优化和调整，例如增加并行上传、错误重试机制、进度通知等功能。本篇博客旨在为您提供一个实现思路以及基础代码，希望对您有所帮助！如果您有任何疑问或建议，欢迎留言讨论。
原生js实现大文件切片上传
yangyanqin2545的博客
08-24 719
原生js实现大文件切片上传
大文件分片上传的JS方法
weixin_64974855的博客
06-28 306
大文件分片上传的JS方法
原生JS上传大文件切片
Mr_Zang666的博客
09-16 145
文件夹数据库处理逻辑 publicclassDbFolder { JSONObject root; publicDbFolder() { this.root =newJSONObject(); this.root.put("f_id",""); this.root.put("f_nameLoc","根目录"); this.root.put("f_pid",""); ...
js 大文件分片上传处理
weixin_45525177的博客
12-09 1234
文件上传是一个老生常谈的话题了，在文件相对比较小的情况下，可以直接把文件转化为字节流上传到服务器，但在文件比较大的情况下，用普通的方式进行上传，这可不是一个好的办法，毕竟很少有人会忍受，当文件上传到一半中断后，继续上传却只能重头开始上传，这种让人不爽的体验。断点续传是在下载或上传时，将下载或上传任务（一个文件或一个压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传或者下载未完成的部分，而没有必要从头开始上传或者下载。
JS大文件分片上传详解
程序老曹的博客
05-11 316
在Web开发中，大文件上传一直是一个挑战。传统的文件上传方法可能导致浏览器崩溃、服务器过载或上传超时。为了解决这个问题，我们可以使用文件分片（Chunking）技术，将大文件分割成多个小块（chunks），然后逐个上传这些小块。这样不仅可以提高上传的稳定性，还可以实现断点续传和并行上传。
大文件上传技术解析：前端切片与服务端合并
"大文件上传解决方案，包括前端文件切割、并发上传切片，以及服务端的切片合并和文件秒传技术。" 大文件上传是一个常见的挑战，尤其是在网络环境不稳定或者文件尺寸过大的情况下。本资源主要介绍了如何通过前端和...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小小白zyw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值