FileReader.readAsArrayBuffer() — Methode · JavaScript-Referenz

Signatur

FileReader.prototype.readAsArrayBuffer(blob)

Beschreibung

Die Methode readAsArrayBuffer() liest den Inhalt eines Blob bzw. einer File als rohe Binärdaten ein. Sie arbeitet asynchron und gibt sofort undefined zurück. Ist das Lesen abgeschlossen, steht reader.readyState auf DONE (2), das Ereignis load wird ausgelöst (danach loadend) und reader.result enthält einen ArrayBuffer mit den Daten.

Sinnvoll ist die Methode immer dann, wenn Dateien byteweise verarbeitet werden müssen. Typische Fälle sind Dateisignaturen („Magic Numbers“) prüfen, Hashes mit crypto.subtle.digest() berechnen, Binärformate wie PNG, ZIP oder WAV auswerten oder Daten an die Web Audio API bzw. WebAssembly übergeben. Auf den ArrayBuffer greift man über typisierte Arrays (Uint8Array usw.) oder eine DataView zu.

In modernem Code ist await blob.arrayBuffer() meist die kürzere Alternative, weil sie direkt ein Promise zurückgibt. FileReader brauchst du vor allem dann, wenn du Fortschrittsereignisse (progress) auswerten, einen Lesevorgang mit abort() abbrechen oder sehr alte Browser unterstützen willst.

Parameter

Name	Typ	Default	Beschreibung
$blob Pflicht	Blob \| File		Das `Blob`- oder `File`-Objekt, das gelesen werden soll. Wenn du etwas anderes übergibst, wird ein `TypeError` geworfen.

Rückgabewert

Typ

undefined

Beschreibung

Die Methode gibt nichts zurück. Das Ergebnis steht nach dem load-Ereignis als ArrayBuffer in FileReader.result.

Beispiele

Dateityp anhand der Magic Number prüfen

// <input type="file" id="upload">
const input = document.querySelector('#upload');

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

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    const bytes = new Uint8Array(reader.result, 0, 4);
    const hex = [...bytes].map(b => b.toString(16).padStart(2, '0')).join(' ');
    const isPng = hex === '89 50 4e 47';
    console.log(`Signatur: ${hex} – PNG: ${isPng}`);
  });
  reader.addEventListener('error', () => console.error('Lesefehler:', reader.error));

  // Nur die ersten 4 Bytes lesen – spart Speicher bei großen Dateien
  reader.readAsArrayBuffer(file.slice(0, 4));
});

Signatur: 89 50 4e 47 – PNG: true

FileReader in ein Promise verpacken und SHA-256 berechnen

const readAsArrayBuffer = (blob) => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.onerror = () => reject(reader.error);
  reader.readAsArrayBuffer(blob);
});

const sha256 = async (blob) => {
  const buffer = await readAsArrayBuffer(blob);
  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' });
sha256(blob).then(console.log);

2d8bd7d9bb5f85ba643f0110d50cb506a1fe439e769a22503193ea6046bb87f7

Fortschritt beim Lesen großer Dateien anzeigen

// <input type="file" id="big"> <progress id="bar" max="100" value="0"></progress>
const bar = document.querySelector('#bar');

document.querySelector('#big').addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onprogress = (e) => {
    if (e.lengthComputable) {
      bar.value = Math.round((e.loaded / e.total) * 100);
    }
  };
  reader.onloadend = () => {
    console.log(`Fertig: ${reader.result?.byteLength ?? 0} Bytes gelesen`);
  };

  reader.readAsArrayBuffer(file);
});

Fertig: 10485760 Bytes gelesen

Moderne Alternative: Blob.arrayBuffer()

const blob = new Blob([new Uint8Array([1, 2, 3, 255])]);
const buffer = await blob.arrayBuffer();
console.log(new Uint8Array(buffer));

Uint8Array(4) [1, 2, 3, 255]

// Wichtig · Fallstricke

Asynchron: Direkt nach dem Aufruf ist reader.result noch null. Werte das Ergebnis erst in load bzw. loadend aus.
InvalidStateError: Wenn du die Methode aufrufst, während derselbe Reader noch liest (readyState === LOADING), wird eine DOMException (InvalidStateError) geworfen. Nimm für parallele Lesevorgänge also jeweils einen eigenen FileReader.
Speicherbedarf: Die gesamte Datei wird in den Arbeitsspeicher geladen. Bei sehr großen Dateien solltest du mit blob.slice() in Stücken lesen oder blob.stream() verwenden.
Fehlerfälle: Wurde die Datei inzwischen gelöscht oder sind die Zugriffsrechte weg, wird error ausgelöst. Ursache: reader.error (z. B. NotReadableError, NotFoundError).
Kompatibilität: Die Methode läuft in allen modernen Browsern und in Web Workern. Node.js hat erst ab Version 20 einen globalen FileReader, dort ist await blob.arrayBuffer() der übliche Weg.
Die frühere Methode readAsBinaryString() sollte nicht mehr verwendet werden. Nimm stattdessen readAsArrayBuffer().

Siehe auch

FileReader.readAsDataURL() FileReader.readAsBinaryString() FileReader.readAsText() FileReader.abort() FileReaderSync.readAsArrayBuffer()