从 Blob 读取 ArrayBuffer 有错误的数据答案

【问题标题】：Reading ArrayBuffer from Blob has wrong data从 Blob 读取 ArrayBuffer 有错误的数据
【发布时间】：2017-04-04 20:55:05
【问题描述】：

我定义了一个简单的 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 个。有什么我错过的吗？

【问题讨论】：

标签： javascript blob filereader arraybuffer typed-arrays

【解决方案1】：

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

要更正，只需更改此行以将 bin 嵌入数组中 - 尽管类型化数组在技术上是一个数组，但无论数据是什么，它都需要一个常规数组来保存/引用各种数据：

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);

【讨论】：