FileReaderSync.readAsDataURL() — Methode · JavaScript-Referenz

Signatur

FileReaderSync.prototype.readAsDataURL(blob)

Beschreibung

Die Methode readAsDataURL() der Schnittstelle FileReaderSync liest den kompletten Inhalt eines Blob oder File ein und gibt ihn synchron als Data-URL zurück, z. B. data:image/png;base64,iVBORw0KG…. Anders als bei FileReader gibt es keine Ereignisse und keine Callbacks: Der Aufruf blockiert, bis die Daten vollständig gelesen sind, und liefert das Ergebnis direkt.

FileReaderSync steht nur in Web Workern (dedizierte und geteilte Worker) zur Verfügung, nicht im Hauptthread. Das Blockieren ist dort unproblematisch, weil die Benutzeroberfläche davon nicht betroffen ist. Typische Einsatzfälle sind Bildvorschauen, die im Worker vorbereitet werden, das Einbetten kleiner Dateien in JSON-Nutzlasten oder das Speichern von Binärdaten als Zeichenkette (z. B. in IndexedDB oder localStorage über den Hauptthread).

Der MIME-Typ in der Data-URL wird aus blob.type übernommen. Ist dieser leer, erzeugen Browser in der Regel data:application/octet-stream;base64,…. Die Base64-Kodierung vergrößert die Datenmenge um etwa ein Drittel.

Parameter

Name	Typ	Default	Beschreibung
$blob Pflicht	Blob \| File		Das `Blob`- oder `File`-Objekt, dessen Inhalt als Data-URL eingelesen werden soll.

Rückgabewert

Typ

string

Beschreibung

Eine Zeichenkette im Format data:<MIME-Typ>;base64,<Daten>, die den vollständigen Inhalt des Blobs enthält.

Beispiele

Bild im Worker in eine Data-URL umwandeln

// worker.js
self.addEventListener('message', (event) => {
  const file = event.data; // File aus <input type="file">
  const reader = new FileReaderSync();
  try {
    const dataUrl = reader.readAsDataURL(file);
    self.postMessage({ ok: true, dataUrl });
  } catch (err) {
    self.postMessage({ ok: false, error: err.name });
  }
});

// main.js
const worker = new Worker('worker.js');
const input = document.querySelector('#bild');
const vorschau = document.querySelector('#vorschau');

input.addEventListener('change', () => {
  const [file] = input.files;
  if (file) worker.postMessage(file);
});

worker.addEventListener('message', ({ data }) => {
  if (data.ok) vorschau.src = data.dataUrl;
  else console.error('Lesefehler:', data.error);
});

Text-Blob als Data-URL einlesen

// innerhalb eines Workers
const reader = new FileReaderSync();
const blob = new Blob(['Hallo Welt'], { type: 'text/plain' });
const dataUrl = reader.readAsDataURL(blob);
console.log(dataUrl);

data:text/plain;base64,SGFsbG8gV2VsdA==

Nur den Base64-Anteil für eine JSON-Nutzlast extrahieren

// worker.js
self.onmessage = async ({ data: file }) => {
  const reader = new FileReaderSync();
  const dataUrl = reader.readAsDataURL(file);
  const base64 = dataUrl.slice(dataUrl.indexOf(',') + 1);

  const response = await fetch('/api/upload', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: file.name, type: file.type, content: base64 })
  });
  self.postMessage(response.status);
};

// Wichtig · Fallstricke

Nur in Workern verfügbar: Im Hauptthread ist FileReaderSync nicht definiert (ReferenceError). Dort FileReader.readAsDataURL() oder URL.createObjectURL() verwenden.
Fehler: Kann die Datei nicht gelesen werden (z. B. weil sie inzwischen gelöscht wurde oder die Rechte fehlen), wirft die Methode eine DOMException wie NotFoundError, NotReadableError oder SecurityError. Den Aufruf daher in try…catch einschließen.
Speicher und Leistung: Die gesamte Datei landet als Base64-Zeichenkette (rund 33 % größer) im Speicher. Für große Dateien oder reine Anzeige ist URL.createObjectURL() deutlich effizienter; für Binärverarbeitung readAsArrayBuffer() oder blob.arrayBuffer().
Moderne Alternative: In vielen Fällen reichen die Promise-basierten Methoden blob.text() und blob.arrayBuffer(), die auch im Hauptthread funktionieren.
Sicherheit: Data-URLs aus unbekannten Quellen nicht ungeprüft als href oder in innerHTML einsetzen – eine Data-URL mit dem Typ text/html oder image/svg+xml kann Skripte enthalten.

Siehe auch

FileReaderSync FileReaderSync.readAsArrayBuffer() FileReaderSync.readAsText() FileReader.readAsDataURL() URL.createObjectURL() Blob Worker