如何将ArrayBuffer转换为byte[]？从HTMLInputElement提取文件原始字节

整体流程 #

1. 从HTMLInputElement获取选中的File对象；
2. 调用File.arrayBuffer()异步读取文件内容，得到ArrayBuffer；
3. 将ArrayBuffer转换为Java的byte[]数组。

代码实现 #

1. 获取文件并调用arrayBuffer()

HTMLInputElement fileInput = (HTMLInputElement) DomGlobal.document.getElementById("file-input");
FileList files = fileInput.files;
if (files.length > 0) {
    File targetFile = files.item(0);
    // 异步读取文件为ArrayBuffer
    targetFile.arrayBuffer().then(arrayBuffer -> {
        byte[] rawBytes = toBytes(arrayBuffer);
        // 这里对原始字节数组进行后续处理
        return null;
    }).catch(error -> {
        DomGlobal.console.error("文件读取失败:", error);
        return null;
    });
}

2. 实现ArrayBuffer转byte[]的方法

import elemental2.core.ArrayBuffer;
import elemental2.core.Uint8Array;

public static byte[] toBytes(ArrayBuffer buffer) {
    // 创建Uint8Array视图，直接映射ArrayBuffer的原始字节
    Uint8Array uint8Array = new Uint8Array(buffer);
    byte[] resultBytes = new byte[(int) uint8Array.length];
    
    // 遍历复制每个字节
    for (int i = 0; i < uint8Array.length; i++) {
        // Uint8Array的元素是无符号8位整数，转为Java byte时自动处理符号位，不丢失原始二进制信息
        resultBytes[i] = (byte) uint8Array.getAt(i);
    }
    
    return resultBytes;
}

关键说明 #

• Uint8Array是JavaScript提供的类型，用于直接操作二进制数据的8位无符号整数视图，它能完整映射ArrayBuffer的原始字节内容；
• 转换时的强制类型转换(byte)不会丢失原始字节信息，只是将无符号的8位值转为Java的有符号byte，二进制表示完全一致；
• 该方法在elemental2/GWT环境下可以直接运行，无需额外依赖。

内容的提问来源于stack exchange，提问作者R A