Cách đi từ Blob đến ArrayBuffer

Tôi đang nghiên cứu Blob và tôi nhận thấy rằng khi bạn có ArrayBuffer, bạn có thể dễ dàng chuyển đổi nó thành Blob như sau:

var dataView = new DataView(arrayBuffer);
var blob = new Blob([dataView], { type: mimeString });

Câu hỏi tôi đặt ra bây giờ là, liệu có thể chuyển từ Blob sang ArrayBuffer không?

Các ResponseAPI tiêu thụ một (không thay đổi) Blobmà từ đó các dữ liệu có thể được lấy ra bằng nhiều cách. Các OP chỉ yêu cầu ArrayBuffer, và đây là một cuộc biểu tình của nó.

var blob = GetABlobSomehow();

// NOTE: you will need to wrap this up in a async block first.
/* Use the await keyword to wait for the Promise to resolve */
await new Response(blob).arrayBuffer();   //=> <ArrayBuffer>

hoặc bạn có thể sử dụng cái này:

new Response(blob).arrayBuffer()
.then(/* <function> */);

Lưu ý: Đây API không tương thích với cũ ( cổ các trình duyệt) để có một cái nhìn vào tương thích trình duyệt Bảng để được ở bên an toàn;)

Bạn có thể sử dụng FileReaderđể đọc Blobnhư một ArrayBuffer.

Đây là một ví dụ ngắn gọn:

var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function(event) {
    arrayBuffer = event.target.result;
};
fileReader.readAsArrayBuffer(blob);

Đây là một ví dụ dài hơn:

// ArrayBuffer -> Blob
var uint8Array  = new Uint8Array([1, 2, 3]);
var arrayBuffer = uint8Array.buffer;
var blob        = new Blob([arrayBuffer]);

// Blob -> ArrayBuffer
var uint8ArrayNew  = null;
var arrayBufferNew = null;
var fileReader     = new FileReader();
fileReader.onload  = function(event) {
    arrayBufferNew = event.target.result;
    uint8ArrayNew  = new Uint8Array(arrayBufferNew);

    // warn if read values are not the same as the original values
    // arrayEqual from: http://stackoverflow.com/questions/3115982/how-to-check-javascript-array-equals
    function arrayEqual(a, b) { return !(a<b || b<a); };
    if (arrayBufferNew.byteLength !== arrayBuffer.byteLength) // should be 3
        console.warn("ArrayBuffer byteLength does not match");
    if (arrayEqual(uint8ArrayNew, uint8Array) !== true) // should be [1,2,3]
        console.warn("Uint8Array does not match");
};
fileReader.readAsArrayBuffer(blob);
fileReader.result; // also accessible this way once the blob has been read

Điều này đã được thử nghiệm trong bảng điều khiển của Chrome 27—69, Firefox 20—60 và Safari 6—11.

Đây cũng là phần trình diễn trực tiếp mà bạn có thể chơi: https://jsfiddle.net/potatosalad/FbaM6/

Cập nhật 2018-06-23: Cảm ơn Klaus Klein về mẹo về event.target.resultso vớithis.result

Tài liệu tham khảo:

• https://developer.mozilla.org/en-US/docs/Web/API/FileReader#readAsArrayBuffer ()
• https://www.w3.org/TR/FileAPI/#dfn-readAsArrayBuffer

Chỉ để bổ sung cho câu trả lời của Mr @potatosalad.

Bạn thực sự không cần phải truy cập phạm vi chức năng để nhận kết quả trên lệnh gọi lại onload , bạn có thể tự do thực hiện như sau trên tham số sự kiện :

var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function(event) {
    arrayBuffer = event.target.result;
};
fileReader.readAsArrayBuffer(blob);

Tại sao điều này tốt hơn? Vì khi đó chúng ta có thể sử dụng hàm mũi tên mà không làm mất ngữ cảnh

var fileReader = new FileReader();
fileReader.onload = (event) => {
    this.externalScopeVariable = event.target.result;
};
fileReader.readAsArrayBuffer(blob);

Hoặc bạn có thể sử dụng API tìm nạp

fetch(URL.createObjectURL(myBlob)).then(res => res.arrayBuffer())

Tôi không biết sự khác biệt về hiệu suất là gì và điều này cũng sẽ hiển thị trên tab mạng của bạn trong DevTools.

Có tại (& FF 69+ Chrome 76+) một Blob.prototype.arrayBuffer () phương pháp mà sẽ trả về một Promise giải quyết với một ArrayBuffer đại diện cho dữ liệu của Blob.

(async () => {
  const blob = new Blob(['hello']);
  const buf = await blob.arrayBuffer();
  console.log( buf.byteLength ); // 5
})();