前端分片上传及生成MD5

const CHUNK_MD5_SIZE = 50 * 1024 * 1024; // MD5 分片大小

// 使用 spark-md5

import SparkMD5 from "spark-md5";

function getFilesSparkMd5(file) {
  return new Promise((resolve, reject) => {
    let currentPosition = 0; // 当前读取位置
    const fileReader = new FileReader();
    const spark = new SparkMD5.ArrayBuffer();
    // 逐块读取文件内容并计算MD5
    const processChunk = (chunk) => {
      return new Promise((resolve, reject) => {
        spark.append(chunk);
        currentPosition += chunk.byteLength;
        resolve();
      });
    };
    // 读取下一个块
    const loadNextChunk = () => {
      const fileSlice = file.slice(
        currentPosition,
        currentPosition + CHUNK_MD5_SIZE
      );
      fileReader.readAsArrayBuffer(fileSlice);
    };
    // file  Reader onload
    fileReader.onload = (e) => {
      const chunk = e.target.result;
      if (chunk) {
        processChunk(chunk).then(() => {
          if (currentPosition < file.size) {
            loadNextChunk();
          } else {
            resolve(spark.end());
          }
        });
      }
      spark.append(e.target.result);
      let md5 = spark.end();
      resolve(md5);
    };
    // file  Reader onerror
    fileReader.onerror = (err) => {
      reject(err.target.error);
    };
    // 开始读取第一个块
    loadNextChunk();
  });
}

// 同步调用
async function uploadFile(file){
    await md5 =  getFilesSparkMd5(file)
}

//使用 CryptoJS 

import CryptoJS from "crypto-js";
function getFilesCryptoJSMD5(file) {
  return new Promise((resolve, reject) => {
    let currentPosition = 0; // 当前读取位置
    const fileReader = new FileReader();
    const md5 = CryptoJS.algo.MD5.create();

    // 逐块读取文件内容并计算MD5
    const processChunk = (chunk) => {
      return new Promise((resolve, reject) => {
        const wordArray = CryptoJS.lib.WordArray.create(chunk);
        md5.update(wordArray);
        currentPosition += chunk.byteLength;
        resolve();
      });
    };

    // 读取下一个块
    const loadNextChunk = () => {
      const fileSlice = file.slice(
        currentPosition,
        currentPosition + CHUNK_MD5_SIZE
      );
      fileReader.readAsArrayBuffer(fileSlice);
    };

    // fileReader onload
    fileReader.onload = (e) => {
      const chunk = e.target.result;
      if (chunk) {
        processChunk(chunk).then(() => {
          if (currentPosition < file.size) {
            loadNextChunk();
          } else {
            const md5Hash = md5.finalize().toString();
            resolve(md5Hash);
          }
        });
      }
    };

    // fileReader onerror
    fileReader.onerror = (err) => {
      reject(err.target.error);
    };

    // 开始读取第一个块
    loadNextChunk();
  });
}

// 同步调用
async function uploadFile(file){
    await md5 =  getFilesCryptoJSMD5(file)
}

二者区别
 

SparkMD5和crypto-js都是用于生成MD5哈希的JavaScript库，但它们之间存在一些区别：

1. 库大小：

    

   SparkMD5是一个专门用于生成MD5哈希的轻量级库，它的文件大小相对较小（约为10KB）。而crypto-js是一个更加全面的加密库，它包含了许多其他加密算法（如SHA-1、SHA-256、SHA-512等），因此文件大小相对较大（约为200KB）。

2. 浏览器支持：

    

   SparkMD5专为浏览器环境设计，它可以在浏览器中直接使用，而无需额外的配置。而crypto-js在浏览器环境中也可以使用，但需要使用<script>标签引入库文件，而不是通过import语句导入。

3. API设计：

    

   SparkMD5的API设计简单易用，可以直接调用SparkMD5.hash()方法生成MD5哈希。而crypto-js的API设计更加复杂，需要使用CryptoJS.MD5()方法生成MD5哈希，并调用toString()方法将哈希值转换为字符串。

4. 兼容性：

    

   SparkMD5和crypto-js都支持现代浏览器和Node.js环境。但是，crypto-js在某些较旧的浏览器中可能存在兼容性问题。

5. 我的开发项目中 文件需要再Linux 系统中解压 SparkMD5 生成的MD5 和Linux系统生成的MD5不一致，crypto-js 和 java Linux对于同一个文件生成了相同的MD5

总之，SparkMD5和crypto-js都是用于生成MD5哈希的JavaScript库，但它们在库大小、浏览器支持、API设计和兼容性方面存在一些区别。在选择使用哪个库时，您需要根据项目需求和技术栈来权衡这些因素。