SparkMD5

SparkMD5 是什么？

• SparkMD5 是一个专为浏览器环境设计的 JavaScript 库，它提供了高效的 MD5 哈希计算功能。MD5 是一种广泛使用的散列函数，用于生成任意大小输入数据的固定长度（128 位）哈希值。SparkMD5 基于 JKM md5 库进行了优化和封装，以实现对大文件分块处理，并能有效地在客户端（如 Web 浏览器）中进行增量或流式计算 MD5 值

SparkMD5 解决了什么问题

• SparkMD5 主要解决了在浏览器环境中高效计算大文件 MD5 值的问题。
• 由于浏览器的限制，一次性加载和处理大文件可能导致性能瓶颈甚至内存溢出。SparkMD5 允许开发者通过将大文件分割成小块来逐步计算其 MD5 值，
• 这样就不需要一次性加载整个文件到内存中，极大地提高了在前端环境下处理大文件时的性能和用户体验。

SparkMD5 API

方法名	功能描述
append(str)	追加一个字符串，如果需要会先将其编码为 UTF8。用于增量计算 MD5 值。
appendBinary(str)	追加一个二进制字符串（如：由readAsBinaryString废弃方法返回的字符串）。用于增量计算 MD5 值。
end(raw)	完成 MD5 计算，返回十六进制结果。如果 raw 参数为真，则返回二进制格式的结果。
reset()	重置内部 MD5 计算状态。
getState()	返回一个表示内部 MD5 计算状态的对象，可以传递给 setState()恢复中断的增量 MD5 计算。
setState(state)	设置内部 MD5 计算状态。参见：getState()。
destroy()	释放由增量缓冲区和其他附加资源占用的内存。
SparkMD5.hash(str, raw)	直接对一个字符串进行 MD5 哈希运算并返回结果。若 raw 参数为真则返回二进制格式结果，否则返回十六进制结果。
SparkMD5.hashBinary(str, raw)	直接对一个二进制字符串进行 MD5 哈希运算并返回结果。若 raw 参数为真则返回二进制格式结果，否则返回十六进制结果。
SparkMD5.ArrayBuffer 类相关方法
ArrayBuffer#append(arr)	追加一个 ArrayBuffer 对象到计算队列中。
ArrayBuffer#end(raw)	完成基于 ArrayBuffer 对象的 MD5 计算，返回十六进制或二进制格式的结果。
ArrayBuffer#reset()	重置基于 ArrayBuffer 对象的 MD5 计算状态。
ArrayBuffer#destroy()	释放与 ArrayBuffer 相关的增量缓冲区和额外资源占用的内存。
ArrayBuffer#getState()	获取基于 ArrayBuffer 对象的 MD5 计算内部状态，可用于恢复中断的增量计算。
ArrayBuffer#setState(state)	设置基于 ArrayBuffer 对象的 MD5 计算内部状态，以继续之前保存的状态下的计算。
ArrayBuffer.hash(arr, raw)	直接对一个 ArrayBuffer 对象进行 MD5 哈希运算并返回十六进制或二进制格式的结果。

示例：

document.getElementById("file").addEventListener("change", function () {
  var blobSlice =
      File.prototype.slice ||
      File.prototype.mozSlice ||
      File.prototype.webkitSlice,
    file = this.files[0],
    chunkSize = 2097152, // Read in chunks of 2MB
    chunks = Math.ceil(file.size / chunkSize),
    currentChunk = 0,
    spark = new SparkMD5.ArrayBuffer(),
    fileReader = new FileReader();

  fileReader.onload = function (e) {
    console.log("read chunk nr", currentChunk + 1, "of", chunks);
    spark.append(e.target.result); //  注意一：这里一直在累加
    currentChunk++;

    if (currentChunk < chunks) {
      loadNext();
    } else {
      console.log("finished loading");
      console.info("computed hash", spark.end()); // Compute hash
    }
  };

  fileReader.onerror = function () {
    console.warn("oops, something went wrong.");
  };

  function loadNext() {
    var start = currentChunk * chunkSize,
      end = start + chunkSize >= file.size ? file.size : start + chunkSize;

    // 注意二：这里一直在切片追加内容
    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
  }

  loadNext();
});

参考文献