前端分片上传及生成MD5

阅读本书更多章节>>>>

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

// 使用 spark-md5import 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库，但它们之间存在一些区别：

库大小：

 

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

浏览器支持：

 

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

API设计：

 

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

兼容性：

 

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

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

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

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-01/151840.html，文章来源：网络cs，作者：纳雷武，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！