当前位置：首页 > news >正文

前端大文件分线程上传

news 2026/3/26 19:27:24

demo.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>大文件上传</title> </head> <body> <input type="file" /> <script src="./sparkmd5.js"></script> <script src="./main.js" type="module"></script> </body> </html>

createChunk.js

import SparkMD5 from './sparkmd5.js'; export function createChunk(file, index, chunkSize) { return new Promise((resolve) => { const start = index * chunkSize; const end = start + chunkSize; const spark = new SparkMD5.ArrayBuffer(); const fileReader = new FileReader(); const blob = file.slice(start, end); fileReader.onload = (e) => { spark.append(e.target.result); resolve({ start, end, index, hash: spark.end(), blob, }); }; fileReader.readAsArrayBuffer(blob); }) }

cutFile.js

import { createChunk } from "./createChunk.js"; // 定义每个切片的大小 const CHUNK_SIZE = 1024 * 1024 * 5; // 5MB // 获取到电脑内核数 const THREAD_COUNT = navigator.hardwareConcurrency || 4; export function cutFile(file) { return new Promise((resolve, reject) => { const chunkCount = Math.ceil(file.size / CHUNK_SIZE); const threadChunkCount = Math.ceil(chunkCount / THREAD_COUNT); const result = []; let finishCount = 0; for (let i = 0; i < threadChunkCount; i++) { // 创建一个线程并分配任务 const worker = new Worker("./worker.js", { type: "module" }); let end = (i + 1) * threadChunkCount; if (end > chunkCount) { end = chunkCount; } worker.postMessage({ file, CHUNK_SIZE, startChunkIndex: i * threadChunkCount, endChunkIndex: end }); worker.onmessage = e => { for (let i = start; i < end; i++) { result[i] = e.data[i - start]; } worker.terminate(); finishCount++; if (finishCount === THREAD_COUNT) { resolve(result); } } } }) }

main.js

import { cutFile } from './cutFile.js'; const inpFile = document.querySelector('input[type=file]'); inpFile.onchange = async (e) => { const file = e.target.files[0]; console.time('cutFile'); const chunks = await cutFile(file); console.log('cutFile'); console.log(chunks); };

sparkmd5.js 文件自行下载

worker.js

import { createChunk } from "./createChunk.js"; onmessage = async (e) => { const { file, CHUNK_SIZE, startChunkIndex: start, endChunkIndex: end, } = e.data for (let i = start; i < end; i++) { Promise.push(createChunk(file, i, CHUNK_SIZE)) } const chunks = await createChunk(file, i, CHUNK_SIZE); postMessage(chunks); };

查看全文

http://www.jsqmd.com/news/531776/