Blob.bytes() — Methode · JavaScript-Referenz

Signatur

Blob.prototype.bytes()

Beschreibung

Die Methode bytes() des Blob-Interfaces (und damit auch von File) liest den kompletten Inhalt des Blobs ein. Das zurückgegebene Promise wird mit einem Uint8Array erfüllt, das die Bytes enthält. Sie ist die bequeme Kurzform für new Uint8Array(await blob.arrayBuffer()).

Einsetzen lässt sie sich überall, wo man byteweise auf Binärdaten zugreifen will: Dateisignaturen („Magic Numbers“) prüfen, Hashes mit crypto.subtle.digest() berechnen, Daten an WebAssembly übergeben oder Binärformate selbst auswerten. Da ein Uint8Array direkt indexierbar ist, braucht man keine zusätzliche Typed-Array-Ansicht mehr.

Die gleichnamige Methode gibt es auch bei Response und Request (Response.prototype.bytes()). Dort liest sie den Body eines Fetch-Aufrufs ein. Der Blob wird dabei nicht verändert, und bytes() lässt sich beliebig oft aufrufen. Jeder Aufruf liefert eine neue Kopie.

Rückgabewert

Typ

Promise<Uint8Array>

Beschreibung

Ein Promise, das mit einem neuen Uint8Array erfüllt wird, das den vollständigen Inhalt des Blobs enthält. Schlägt das Lesen fehl (z. B. weil eine zugrunde liegende Datei nicht mehr lesbar ist), wird das Promise abgelehnt – typischerweise mit einem NotReadableError (DOMException).

Beispiele

Bytes eines einfachen Blobs auslesen

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

console.log(bytes);
console.log(bytes.length);

Uint8Array(5) [72, 97, 108, 108, 111] 5

Dateityp anhand der Magic Number prüfen (PNG)

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() vermeidet das Laden der ganzen Datei
  const header = await file.slice(0, 8).bytes();
  const pngSignatur = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
  const istPng = pngSignatur.every((b, i) => header[i] === b);

  console.log(istPng ? 'Echte PNG-Datei' : 'Kein PNG!');
});

Echte PNG-Datei

SHA-256-Hash einer Datei berechnen

const sha256Hex = async (blob) => {
  const bytes = await blob.bytes();
  const hash = await crypto.subtle.digest('SHA-256', bytes);
  return Array.from(new Uint8Array(hash), (b) => b.toString(16).padStart(2, '0')).join('');
};

const blob = new Blob(['abc']);
console.log(await sha256Hex(blob));

ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad

Fallback für ältere Browser

const blobZuBytes = async (blob) =>
  typeof blob.bytes === 'function'
    ? blob.bytes()
    : new Uint8Array(await blob.arrayBuffer());

const bytes = await blobZuBytes(new Blob([new Uint8Array([1, 2, 3])]));
console.log(bytes);

Uint8Array(3) [1, 2, 3]

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Methode ist recht neu (Firefox 128, Safari 18, Chrome/Edge 132, Node.js 22.3 bzw. 20.16). Für ältere Umgebungen solltest du prüfen, ob sie vorhanden ist, und notfalls auf new Uint8Array(await blob.arrayBuffer()) ausweichen.
Speicherbedarf: Der gesamte Inhalt wird in den Arbeitsspeicher geladen. Bei großen Dateien (mehrere hundert MB oder GB) ist blob.stream() besser, weil es die Daten stückweise liefert. Wenn du nur einen Teil brauchst, schneide ihn vorher mit blob.slice(start, end) heraus.
Jeder Aufruf erzeugt eine neue Kopie. Änderungen am zurückgegebenen Uint8Array wirken sich nicht auf den Blob aus.
Bei File-Objekten wird das Promise mit NotReadableError abgelehnt, wenn die Datei auf dem Datenträger nach der Auswahl verändert oder gelöscht wurde. Verwende daher try/catch.
Für Text ist blob.text() geeigneter, weil es direkt als UTF-8 dekodiert.

Siehe auch

Blob Blob.text() Blob.stream() Blob.slice() Response.bytes() Uint8Array File