Чтение ArrayBuffer из Blob имеет неверные данные

Я определил простой Uint8Array со значениями [0,1,2,3]. Затем я создал объект Blob с этими двоичными данными и прочитал их из fileReader с помощью метода readAsArrayBuffer. Но когда я получил значения из 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 typed-arrays arraybuffer
person modernator    schedule 21.11.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Конструктор Blob принимает массив массивов . Прямо сейчас вы передаете ему один Uint8Array, который он пытается преобразовать в текст. (Вы можете видеть, что символы 49,50,51,51 переводятся в текстовое/ASCII-представление 1,2,3 и 4).

Чтобы исправить, просто измените эту строку, чтобы встроить 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);

person Community    schedule 26.11.2016