Angular中计算文件MD5与Azure Storage签名不一致问题求助

你遇到的核心问题是MD5哈希的处理阶段错误，Azure Storage的MD5签名是「原始16字节二进制哈希值直接转Base64」，而你的代码要么用了错误的文件读取方式，要么把十六进制字符串转成了Base64，自然和Azure的结果不匹配。

错误点拆解 #

• 直接将File对象传入appendByteArray：File不是字节数组类型，无法直接用于MD5计算。
• 使用readAsText读取文件：会把二进制内容按UTF-8编码转换为文本，丢失原始二进制信息，导致MD5计算的是文本内容而非文件本身。
• 对十六进制MD5字符串做Base64编码：Azure用的是16字节原始哈希值转Base64，而非32位十六进制字符串转Base64，两者完全不同。

修正后的代码 #

以下是可以生成Azure兼容MD5 Base64的完整代码：

import { Md5 } from 'ts-md5/dist/md5';

// 假设你有一个文件输入控件
const fileInput = document.getElementById('file-input') as HTMLInputElement;

fileInput.addEventListener('change', async (event) => {
    const selectedFile = (event.target as HTMLInputElement).files?.[0];
    if (!selectedFile) return;

    // 1. 读取文件的原始二进制内容（ArrayBuffer）
    const arrayBuffer = await selectedFile.arrayBuffer();
    const byteArray = new Uint8Array(arrayBuffer);

    // 2. 计算MD5的原始二进制哈希值（16字节）
    const md5Calculator = new Md5();
    md5Calculator.appendByteArray(byteArray);
    // 传入false获取原始Uint8Array类型的哈希值，而非十六进制字符串
    const md5RawBytes = md5Calculator.end(false) as Uint8Array;

    // 3. 将原始二进制哈希值转换为Base64字符串
    const binaryString = String.fromCharCode(...md5RawBytes);
    const azureCompatibleMd5 = btoa(binaryString);

    console.log(azureCompatibleMd5); // 格式与Azure Storage生成的一致
});

关键注意事项 #

• 必须读取文件的原始二进制内容：使用file.arrayBuffer()（或FileReader的readAsArrayBuffer），绝对不能用readAsText或readAsDataURL。
• 获取MD5的原始字节：调用end(false)得到16字节的Uint8Array，而不是默认的十六进制字符串。
• Base64编码的是原始字节：直接将16字节的二进制数据转成Base64，而非十六进制字符串。

内容的提问来源于stack exchange，提问作者Francis Ducharme