FileReaderSync.readAsArrayBuffer() — Methode · JavaScript-Referenz

Signatur

FileReaderSync.prototype.readAsArrayBuffer(blob)

Beschreibung

Die Methode readAsArrayBuffer() des Interfaces FileReaderSync liest den kompletten Inhalt eines Blob oder File und gibt ihn als ArrayBuffer zurück. Anders als bei FileReader gibt es keine Ereignisse wie load oder error und kein Promise. Das Ergebnis kommt direkt als Rückgabewert, und Fehler werden als Ausnahme geworfen.

Weil der Aufruf den Thread blockiert, bis alles gelesen ist, steht FileReaderSync nur in Web Workern zur Verfügung (Dedicated, Shared und Service Worker). Im Haupt-Thread würde er die Oberfläche einfrieren. In einem Worker spielt das Blockieren dagegen keine Rolle, und linearer Code ohne Rückruffunktionen ist oft leichter zu lesen, etwa beim Berechnen von Prüfsummen, beim Auswerten von Binärformaten oder beim Verarbeiten großer Dateien in Teilstücken.

Den zurückgegebenen ArrayBuffer liest man typischerweise über eine Typed-Array-Sicht (Uint8Array usw.) oder eine DataView aus. Mit postMessage() und einer Transfer-Liste kann man ihn ohne Kopie zurück an den Haupt-Thread schicken.

Parameter

Name	Typ	Default	Beschreibung
$blob Pflicht	Blob \| File		Das `Blob`- oder `File`-Objekt, das gelesen werden soll. Mit `blob.slice(start, end)` lässt sich auch nur ein Teilbereich lesen.

Rückgabewert

Typ

ArrayBuffer

Beschreibung

Ein ArrayBuffer mit den Rohbytes des übergebenen Blobs. Seine byteLength entspricht blob.size.

Beispiele

Datei im Worker lesen und die ersten Bytes prüfen (Magic Number)

// worker.js
self.addEventListener('message', (event) => {
  const file = event.data;
  const reader = new FileReaderSync();
  const buffer = reader.readAsArrayBuffer(file.slice(0, 8));
  const bytes = new Uint8Array(buffer);

  // PNG-Signatur: 89 50 4E 47 0D 0A 1A 0A
  const pngSignatur = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
  const istPng = pngSignatur.every((b, i) => bytes[i] === b);

  self.postMessage({ name: file.name, istPng });
});

// main.js
const worker = new Worker('worker.js');
worker.addEventListener('message', (e) => console.log(e.data));
document.querySelector('input[type=file]').addEventListener('change', (e) => {
  worker.postMessage(e.target.files[0]);
});

{ name: 'logo.png', istPng: true }

SHA-256-Prüfsumme einer Datei im Worker berechnen

// worker.js
self.addEventListener('message', async (event) => {
  const file = event.data;
  const buffer = new FileReaderSync().readAsArrayBuffer(file);
  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
  const hex = [...new Uint8Array(hashBuffer)]
    .map((b) => b.toString(16).padStart(2, '0'))
    .join('');
  self.postMessage(hex);
});

'9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08'

Große Datei in Teilstücken lesen und den Puffer übertragen

// worker.js
const CHUNK = 1024 * 1024; // 1 MiB

self.addEventListener('message', (event) => {
  const file = event.data;
  const reader = new FileReaderSync();
  let nullBytes = 0;

  for (let offset = 0; offset < file.size; offset += CHUNK) {
    try {
      const chunk = reader.readAsArrayBuffer(file.slice(offset, offset + CHUNK));
      for (const b of new Uint8Array(chunk)) if (b === 0) nullBytes++;
    } catch (err) {
      self.postMessage({ fehler: err.name });
      return;
    }
  }

  // Kopfbereich ohne Kopie an den Haupt-Thread übertragen
  const header = reader.readAsArrayBuffer(file.slice(0, 16));
  self.postMessage({ nullBytes, header }, [header]);
});

{ nullBytes: 1532, header: ArrayBuffer(16) }

// Wichtig · Fallstricke

Nur in Workern: Im Haupt-Thread ist FileReaderSync nicht definiert, der Aufruf endet dort mit einem ReferenceError. Im Haupt-Thread nimmt man FileReader oder das modernere await blob.arrayBuffer().
Fehler als Ausnahme: Wenn die Datei nicht mehr lesbar ist (zum Beispiel gelöscht oder ohne Berechtigung), wirft die Methode eine DOMException wie NotFoundError, NotReadableError oder SecurityError. Deshalb den Aufruf in try…catch einschließen.
Speicherbedarf: Die ganze Datei landet auf einmal im Arbeitsspeicher. Sehr große Dateien liest man besser mit blob.slice() in Teilstücken oder als Stream über blob.stream().
Moderne Alternative: Blob.prototype.arrayBuffer() gibt ein Promise zurück und funktioniert überall, auch außerhalb von Workern. FileReaderSync lohnt sich vor allem für bestehenden synchronen Code.
Übertragung: Wird der ArrayBuffer per postMessage(buf, [buf]) übertragen, ist er danach im Worker detached und hat die byteLength 0.

Siehe auch

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