前端大文件分线程上传

最新推荐文章于 2024-10-04 00:46:18 发布

web网页精选

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量222

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/qq_43770056/article/details/142658540

版权

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);
};