前言:当用户上传大文件的时候,我们需要保证页面的流畅,还要监听上传进度,还有用户如果取消上传后,再度上传相同文件,是否需要从头上传。

1. html 结构

input 按钮,上传文件。会用到 md5 文件 hash 值,方便上传中断后继续上传,如果已经上传的部分,不会重新上传。



  
    
    
    
    document
    
  
  
    
    
    
  

2. main.js

监听 input 按钮,获取到文件,然后传给 cutFile 函数进行分片。返回分片结果。

import { cutFile } from "./cutFile.js";

const inputFile = document.querySelector('input[type="file"]');

inputFile.onchange = async (e) => {
  const file = e.target.files[0];
  const chunk = await cutFile(file);
  console.log(chunk);
};

 3. cutFile.js

切片函数编写,定义 CHUNK_SIZE 每片大小,开启多线程,拿到你电脑内核数。定义 cutFile 方法,传入 file 开始根据内核开始切片。

const CHUNK_SIZE = 1024 * 1024 * 5; // 5MB
const THREAD_COUNT = navigator.hardwareConcurrency || 4; // 拿到内核数

export function cutFile(file) {
  return new Promise((resolve) => {
    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  chunkCount) {
        end = chunkCount;
      }
      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 === THREAD_COUNT) {
          resolve(result);
        }
      };
    }
  });
}

4. worker.js

定义线程切片方法

// worker.js
import { createChunk } from "./createChunk.js";

onmessage = async (e) => {
  const {
    file,
    CHUNK_SIZE,
    startChunkIndex: start,
    endChunkIndex: end,
  } = e.target;

  const proms = [];
  for (let i = start; i < end; i++) {
    proms.push(createChunk(file, i, CHUNK_SIZE));
  }
  const chunks = await Promise.all(proms);
  postMessage(chunks);
};

5. createChunk.js

给每个分片通过 md5 编码设置一个 hash,判断是否已经上传。

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

本站无任何商业行为
个人在线分享-虚灵IT资料分享 » 前端 JS 经典:大文件分片
E-->