安装依赖
pnpm 或者 npm

pnpm install --save spark-md5

spark-md5提供了两个计算md5的方法。一种是用 SparkMD5.hashBinary() 直接将整个文件的二进制码传入，直接返回文件的md5。这种方法对于小文件会比较有优势，简单而且速度超快。

另一种方法是利用js中File对象的 slice() 方法（ File.prototype.slice ）将文件分片后逐个传入 spark.appendBinary() 方法来计算、最后通过 spark.end() 方法输出md5。分片计算md5，对于大文件和超大文件会非常有利，不容易出错，不占用大内存，并且能够提供计算的进度信息。

整个文件计算

import SparkMD5 from 'spark-md5';
import { message } from 'ant-design-vue/es';

function getFileMD5(file: File) {
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.readAsBinaryString(file);
        fileReader.onload = (e: any) => {
            resolve(SparkMD5.hashBinary(e.target.result, false));
        };
        fileReader.onerror = function () {
            message.error('文件读取出错，请检查该文件！');
            reject(new Error('文件读取出错，请检查该文件！'));
        };
    });
}

分片计算

import SparkMD5 from 'spark-md5';
import { message } from 'ant-design-vue/es';

const CHUNK_SIZE = 10 * 1024 * 1024; // 10M
function getFileMD5(file: File) {
    const spark = new SparkMD5.ArrayBuffer();
    const fileReader = new FileReader();
    // 获取文件分片对象（注意它的兼容性，在不同浏览器的写法不同）
    const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
    // 当前分片下标
    let currentChunk = 0;
    // 分片总数(向下取整)
    const chunks = Math.ceil(file.size / this.CHUNK_SIZE);
    // 加载下一个分片
    const loadNext = () => {
        const start = currentChunk * this.CHUNK_SIZE;
        const end = start + this.CHUNK_SIZE >= file.size ? file.size : start + this.CHUNK_SIZE;
        // 文件分片操作，读取下一分片(fileReader.readAsArrayBuffer操作会触发onload事件)
        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
    };
    loadNext();

    return new Promise((resolve, reject) => {
        fileReader.onload = function (e: any) {
            spark.append(e.target.result);
            if (currentChunk < chunks) {
                currentChunk++;
                loadNext();
            } else {
                // 该文件的md5值
                const md5 = spark.end();
                resolve(md5);
            }
        };
        fileReader.onerror = function () {
            message.error('文件读取出错，请检查该文件！');
            reject(new Error('文件读取出错，请检查该文件！'));
        };
    });
}