从 Blob 读取 ArrayBuffer 有错误的数据

Question

我定义了一个简单的 Uint8Array，其值为 [0,1,2,3]。然后我用这个二进制数据创建了一个 Blob 对象，并使用 readAsArrayBuffer 方法从 fileReader 中读取。但是当我从 blob 中获取值时，它包含 [48, 49, 50, 51]，而不是 [0,1,2,3]!

这是源代码：

var bin = new Uint8Array(4);
bin[0] = 0;
bin[1] = 1;
bin[2] = 2;
bin[3] = 3;
console.log(bin);    // [0,1,2,3]

var blob = new Blob(bin);

var fileReader = new FileReader();
fileReader.onload = function() {
    var buffer = fileReader.result;
    var dv = new DataView(buffer);
    console.log(new Uint8Array(buffer));    // [49,50,51,52]

    var dv = new DataView(buffer);
    console.log([
        dv.getUint8(0),
        dv.getUint8(1),
        dv.getUint8(2),
        dv.getUint8(3)
    ]);    // it also prints [49,50,51,52]
    };
};

fileReader.readAsArrayBuffer(blob);

为什么会这样？我写了 0、1、2、3，但每个值都增加了 48。有什么我错过的吗？

Answer 1

Blob constructor takes an array of arrays。现在，您正在向它传递一个 Uint8Array，它会尝试将其转换为文本。（您可以看到字符 49、50、51、51 转换为 textual/ASCII 表示 1、2、3 和 4）。

要更正，只需更改此行以将 bin 嵌入到数组中 - 虽然类型化数组在技术上是一个数组，但它需要一个常规数组来 hold/reference 各种数据，而不管数据是什么是：

var blob = new Blob([bin]);

我也建议使用 mime 类型，但在这种情况下并不需要。

var bin = new Uint8Array(4);
bin[0] = 0;
bin[1] = 1;
bin[2] = 2;
bin[3] = 3;
console.log(bin);    // [0,1,2,3]

var blob = new Blob([bin]);  // !! <- make sure this is passed an array

var fileReader = new FileReader();
fileReader.onload = function() {
    var buffer = fileReader.result;
    var dv = new DataView(buffer);
    console.log(new Uint8Array(buffer));

    var dv = new DataView(buffer);
    console.log([
        dv.getUint8(0),
        dv.getUint8(1),
        dv.getUint8(2),
        dv.getUint8(3)
    ]);
};

fileReader.readAsArrayBuffer(blob);

从 Blob 读取 ArrayBuffer 有错误的数据

Reading ArrayBuffer from Blob has wrong data

javascript

blob

filereader

arraybuffer

typed-arrays