【JS Nextjs】大文件hash的几种实现方法

在静态资源上传和管理上，尤其是分片上传时，我们经常会用到文件hash。今天给大家介绍几种文件hash的实现方法。下图是几种hash的耗时和hash值。

文件hash的概念

通过hash算法将文件内容转为固定长度的字符串，用于文件内容的唯一标识。

文件hash的应用场景

• 验证数据的完整性
• 文件内容的唯一标识
• 重复文件检测
• 版本控制

常用的hash算法

MD5、SHA-1、SHA-256、SHA-384、SHA-512

hash算法比较

• MD5，最快，但存在碰撞风险，属于非加密hash
• SHA-1 较快，但存在碰撞风险, 属于加密hash
• SHA-256 中等，安全性较高，属于加密hash
• SHA-384 中等，安全性高，属于加密hash
• SHA-512 中等，安全性非常高，属于加密hash

代码实现

1. 原生js提供的加密hash方法，对于1000M以下的文件，速度非常快，超大文件时(大于1G时)速度中等

async function calculateNativeHash(file: File) {
  const buffer = await file.arrayBuffer();
  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

上图可视：文件大小 734.98 MB 耗时：2.52秒

2. 使用crpto-js,速度较慢，尤其大文件会出现非常明显的卡顿

async function calculateFileHashByChunks(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    const chunkSize = 1024 * 1024 * 50; // 50MB分片
    let currentChunk = 0;
    const totalChunks = Math.ceil(file.size / chunkSize);
    const hash = CryptoJS.algo.MD5.create();

    reader.onload = async (e) => {
      try {
        // 转换分片数据
        const buffer = new Uint8Array(e.target?.result as ArrayBuffer);
        const wordArray = CryptoJS.lib.WordArray.create(buffer);
        hash.update(wordArray);
        currentChunk++;
        if (currentChunk < totalchunks loadnextchunk else resolvehash.finalize.tostring catch error rejecterror const loadnextchunk='()'> {
      const start = currentChunk * chunkSize;
      const end = Math.min(start + chunkSize, file.size);
      reader.readAsArrayBuffer(file.slice(start, end));
    };

    reader.onerror = reject;
    loadNextChunk();
  });
}

上图可视：文件大小 734.98 MB 耗时：28.02秒

3. spark-md5,速度中等，即使使用分块或者worker,速度不会有很多提升

async function calculateSparkHash(file: File) {
  const spark = new SparkMD5.ArrayBuffer();
  const stream = file.stream();
  const reader = stream.getReader();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    spark.append(value.buffer);
  }

  return spark.end();
}

上图可视：文件大小 734.98 MB 耗时：8.83秒

4. wasm-hash,使用webAssamb1y，速度快，尤其在超大文件时速度比原生js要快的多

const md5 = await createMD5();
  
  md5.init();
  const reader = file.stream().getReader();
  let n=0
  while (true) {
    const { done, value } = await reader.read();
    console.log('n次数',n++,)
    if (done) break;
    md5.update(value);
  }

  return md5.digest('hex');

上图可视：文件大小 734.98 MB 耗时：3.44秒

5. 截图中还有其他几种hash算法，是结合worker的，但提升并不是很大，就不列举出来了。需要查看源码的朋友，可以next-demo: next-demo。