Blob.arrayBuffer() — Methode · JavaScript-Referenz

Signatur

Blob.prototype.arrayBuffer()

Beschreibung

Die Methode arrayBuffer() liest die Binärdaten eines Blob vollständig ein und gibt ein Promise zurück, das mit einem ArrayBuffer erfüllt wird. Da File von Blob erbt, funktioniert sie auch direkt mit Dateien aus <input type="file">, Drag-and-drop oder der Zwischenablage.

Sie ist der moderne, Promise-basierte Ersatz für FileReader.readAsArrayBuffer(): Man braucht keine Event-Handler mehr und kann sie direkt mit await nutzen. Typische Einsatzfälle sind das Prüfen von Datei-Signaturen („Magic Bytes“), das Berechnen von Hashes mit crypto.subtle.digest(), das Dekodieren von Audio mit der Web Audio API oder das Weiterreichen von Binärdaten an WebAssembly, Worker oder WebSockets.

Der zurückgegebene ArrayBuffer selbst ist nicht direkt lesbar — man greift über eine Sicht wie Uint8Array oder DataView auf die Bytes zu. Der Blob wird dabei nicht verändert; jeder Aufruf erzeugt eine neue Kopie der Daten.

Rückgabewert

Typ

Promise<ArrayBuffer>

Beschreibung

Ein Promise, das mit einem ArrayBuffer erfüllt wird, der den kompletten Inhalt des Blobs enthält. Bei Lesefehlern (z. B. wenn die zugrunde liegende Datei inzwischen gelöscht oder geändert wurde) wird das Promise mit einem DOMException (meist NotReadableError) abgelehnt.

Beispiele

Datei-Typ anhand der Magic Bytes prüfen

const input = document.querySelector('input[type="file"]');

input.addEventListener('change', async () => {
  const file = input.files[0];
  if (!file) return;

  // Nur die ersten 8 Bytes lesen – slice() spart Speicher bei großen Dateien
  const buffer = await file.slice(0, 8).arrayBuffer();
  const bytes = new Uint8Array(buffer);

  const isPng = [0x89, 0x50, 0x4e, 0x47].every((b, i) => bytes[i] === b);
  console.log(isPng ? 'Echte PNG-Datei' : 'Kein PNG');
});

Echte PNG-Datei

SHA-256-Hash einer Datei berechnen

const sha256 = async (blob) => {
  const buffer = await blob.arrayBuffer();
  const hash = await crypto.subtle.digest('SHA-256', buffer);
  return [...new Uint8Array(hash)]
    .map((b) => b.toString(16).padStart(2, '0'))
    .join('');
};

const blob = new Blob(['Hallo Welt'], { type: 'text/plain' });
console.log(await sha256(blob));

2d8bd7d9bb5f85ba643f0110d50cb506a1fe439e769a22503193ea6046bb87f7

Bytes eines Blobs ausgeben

const blob = new Blob([new Uint8Array([72, 105, 33])]);

const buffer = await blob.arrayBuffer();
console.log(buffer.byteLength);
console.log(new Uint8Array(buffer));
console.log(new TextDecoder().decode(buffer));

3 Uint8Array(3) [72, 105, 33] Hi!

Heruntergeladene Audiodatei dekodieren

const audioCtx = new AudioContext();

const response = await fetch('/sounds/klick.mp3');
const blob = await response.blob();

const audioBuffer = await audioCtx.decodeAudioData(await blob.arrayBuffer());
const source = audioCtx.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioCtx.destination);
source.start();

// Wichtig · Fallstricke

Speicherbedarf: Der gesamte Blob wird auf einmal in den Arbeitsspeicher geladen. Bei sehr großen Dateien (mehrere hundert MB oder GB) lieber blob.stream() zum stückweisen Verarbeiten oder blob.slice() für Teilbereiche verwenden.
Kein direkter Byte-Zugriff: Ein ArrayBuffer muss erst in eine Sicht wie Uint8Array oder DataView verpackt werden.
Nur für Text? Wenn man ohnehin Text braucht, ist blob.text() kürzer und dekodiert automatisch als UTF-8.
Fehlerbehandlung: Wurde eine File nach der Auswahl auf der Festplatte verändert oder gelöscht, lehnt das Promise mit NotReadableError ab – immer try/catch verwenden.
Kompatibilität: Verfügbar in Chrome 76+, Firefox 69+, Safari 14+ und Node.js 15.7+ (buffer.Blob, global seit Node.js 18). Für sehr alte Browser bleibt FileReader.readAsArrayBuffer() als Rückfalllösung.
Neuere Browser bieten zusätzlich blob.bytes(), das direkt ein Uint8Array liefert – noch nicht überall verfügbar.

Siehe auch

Blob Blob.text() Blob.stream() Blob.slice() Blob.bytes()