浏览器端JS读取本地二进制文件转base64结果与Linux命令不一致问题

算力阿峰

2026-10-2

问题原因

问题根源在于文件读取逻辑的默认行为错误：

XMLHttpRequest默认会将响应内容按文本格式解析，responseText会把原始二进制字节尝试按UTF-8编码转换为JS字符串。当遇到不符合UTF-8编码规则的字节时，这些字节会被统一替换为U+FFFD（�）替换字符，原始二进制数据被篡改，后续无论使用什么base64转换方法都会得到错误结果。
你所用的btoa(unescape(encodeURIComponent(str)))转换逻辑仅适用于合法UTF-8文本场景，完全无法兼容原始二进制数据的转换需求。

解决方案

纯浏览器原生API即可实现需求，无第三方依赖，支持同步读取：

function readBinaryFileToBase64(fileUrl) {
    const xhr = new XMLHttpRequest();
    // 开启同步请求模式
    xhr.open('GET', fileUrl, false);
    // 核心配置：指定响应类型为ArrayBuffer，直接读取原始二进制数据，不做文本编码转换
    xhr.responseType = 'arraybuffer';
    xhr.send(null);

    if (xhr.status !== 200 && xhr.status !== 0) {
        throw new Error('文件读取失败，状态码：' + xhr.status);
    }

    // 将二进制缓冲区转换为Uint8数组，再拼接为二进制字符串
    const uint8Array = new Uint8Array(xhr.response);
    let binaryStr = '';
    for (let i = 0; i < uint8Array.length; i++) {
        binaryStr += String.fromCharCode(uint8Array[i]);
    }

    // 原生btoa直接转换即可得到正确的base64结果
    return btoa(binaryStr);
}

// 调用示例
try {
    const base64 = readBinaryFileToBase64("file:///Users/henrytk/tmp/stuff/random");
    console.log(base64); // 输出与Linux base64命令一致：Tg8j3hAv/u4=
} catch (err) {
    console.error('读取失败：', err);
}