javascript - 往返 Blob 到 Array 将 48 添加到数组值

Question

我有两个函数用于在 Blob 和字节数组之间进行转换:

function arrayToBlob(data) {
    return new Blob(data);
}

function blobToArray(data, callback) {
    let reader = new FileReader();
    reader.addEventListener("loadend", function() {
        callback(Array.from(new Uint8Array(reader.result)));
    });
    reader.readAsArrayBuffer(data);
}

(blobToArray 需要一个回调，因为它需要设置一个事件监听器。)

我希望这些函数彼此相反，但是当我运行时

blobToArray(arrayToBlob([1,2,3]), console.log)

我得到的结果不是[1, 2, 3]，而是[49, 50, 51]。据推测，我正在做的事情是将数字转换为它们的 ASCII 值，但我不知道是哪一部分负责。

Answer 1

问题在于 Blob 的构造函数将数组中的数字转换为字符串。根据 MDN文档 Blob 的构造函数采用 Array 或 ArrayBuffer 的 array，ArrayBufferView 、Blob、DOMString 对象，或任何此类对象的组合，作为第一个参数。所有这些都将被连接起来并放入 Blob 中。因此，您传递的数组中的每个元素都被单独处理。它们被转换为字符串(参见 ASCII 表，'1' 的代码为 49 等等)并放入 Blob。
请注意，这 4 个表达式的结果是相同的:

function arrayToBlob(data) {
    return new Blob(data);
}

function blobToArray(data, callback) {
    let reader = new FileReader();
    reader.addEventListener("loadend", function() {
        callback(Array.from(new Uint8Array(reader.result)));
    });
    reader.readAsArrayBuffer(data);
}

blobToArray(arrayToBlob([1,2,3]), console.log)
blobToArray(arrayToBlob(['1','2','3']), console.log)
blobToArray(arrayToBlob([123]), console.log)
blobToArray(arrayToBlob(['123']), console.log)

如果你想得到一个二进制数组，你需要将一个适当的二进制数组传递给 Blob:

function arrayToBlob(data) {
    return new Blob([data]);
}

function blobToArray(data, callback) {
    let reader = new FileReader();
    reader.addEventListener("loadend", function() {
        callback(Array.from(new Uint8Array(reader.result)));
    });
    reader.readAsArrayBuffer(data);
}

var arr = new Uint8Array(3);
arr[0]=1;
arr[1]=2;
arr[2]=3;

blobToArray(arrayToBlob(arr), console.log)

请注意我如何将 Uint8Array 传递给 Blob:return new Blob([data]);。我将它放在一个数组中，这样它就不会被视为 Blob 作为第一个参数的对象数组。
总之:您并没有真正进行往返，您从一种类型的数组开始并将其转换为另一种类型的数组。如果您从一开始就使用适当的数组，那么一切都会起作用。