js-spark-md5 计算文件MD5值

背景

最近遇到了新需求，上传图片需要用文件MD5作为文件名。所以了解并使用了[js-spark-md5](satazor/js-spark-md5: Lightning fast normal and incremental md5 for javascript (github.com))来计算文件的MD5值，下面就来介绍如何使用。

安装

yarn add spark-md5

使用

封装工具函数

import SparkMD5 from "spark-md5"

/**
 * 计算文件MD5
 * @param file File
 * @returns
 */
export function fileMD5(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader()

    if (Math.ceil(file.size / 1024) < 20) {
      fileReader.readAsBinaryString(file)
      fileReader.onload = (e) => {
        resolve(SparkMD5.hashBinary(e.target?.result))
      }
    } else {
      const sliceLength = 10
      const chunkSize = Math.ceil(file.size / sliceLength)
      const md5 = new SparkMD5()
      let index = 0
      const loadFile = () => {
        const slice = file.slice(index, index + chunkSize)
        fileReader.readAsBinaryString(slice)
      }
      loadFile()
      fileReader.onload = (e) => {
        md5.appendBinary(e.target?.result)
        if (index < file.size) {
          index += chunkSize
          loadFile()
        } else {
          resolve(md5.end())
        }
      }
    }

    fileReader.onerror = (e) => {
      reject(e)
    }
  })
}

代码解析

使用FileReader的readAsBinaryString()方法读取文件内容，再调用SparkMD5.hashBinary()方法直接获取返回的md5内容，如果文件较大，则采用分片方式获取md5增加性能。