js 获取文件的hash

在JavaScript中获取文件的hash值，通常是为了验证文件的完整性或者进行文件去重等操作。以下是一些常见的方法和相关概念：

基础概念

Hash函数：一种将任意长度的数据映射到固定长度输出的算法。常见的hash函数有MD5、SHA-1、SHA-256等。
文件Hash：通过对文件内容进行hash运算得到的一个固定长度的字符串，用于表示文件的唯一性。

获取文件Hash的方法

方法一：使用FileReader和Crypto API（适用于现代浏览器）

async function getFileHash(file) {
    const arrayBuffer = await file.arrayBuffer();
    const hashBuffer = await crypto.subtle.digest('SHA-256', arrayBuffer);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
    return hashHex;
}

// 使用示例
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (event) => {
    const file = event.target.files[0];
    const fileHash = await getFileHash(file);
    console.log('文件Hash:', fileHash);
});

方法二：使用第三方库（如SparkMD5）

SparkMD5是一个快速计算文件MD5值的JavaScript库，适用于大文件的hash计算。

<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
<script>
function calculateMD5(file) {
    return new Promise((resolve, reject) => {
        const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
        const chunkSize = 2097152; // 读取2MB的块
        let chunks = Math.ceil(file.size / chunkSize);
        let currentChunk = 0;
        const spark = new SparkMD5.ArrayBuffer();
        const fileReader = new FileReader();

        fileReader.onload = function(e) {
            spark.append(e.target.result);
            currentChunk++;
            if (currentChunk < chunks) {
                loadNext();
            } else {
                resolve(spark.end());
            }
        };

        fileReader.onerror = function() {
            reject('文件读取错误');
        };

        function loadNext() {
            const start = currentChunk * chunkSize;
            const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
            fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
        }

        loadNext();
    });
}

// 使用示例
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (event) => {
    const file = event.target.files[0];
    const fileHash = await calculateMD5(file);
    console.log('文件MD5:', fileHash);
});