FileReader.readAsDataURL() — Methode · JavaScript-Referenz

Signatur

FileReader.prototype.readAsDataURL(blob)

Beschreibung

Die Methode readAsDataURL() startet einen asynchronen Lesevorgang für das übergebene Blob- bzw. File-Objekt. Ist der Vorgang abgeschlossen, steht readyState auf DONE, das Ereignis load (bzw. loadend) wird ausgelöst und result enthält einen String der Form data:<MIME-Typ>;base64,<Daten>.

Typische Einsatzzwecke sind die Vorschau von Bildern vor dem Hochladen (z. B. aus einem <input type="file">), das Einbetten kleiner Dateien in JSON-Nutzdaten, das Zwischenspeichern in localStorage oder das Übergeben von Binärdaten an APIs, die ausschließlich Strings akzeptieren.

Die Methode selbst gibt nichts zurück – das Ergebnis erhältst du ausschließlich über Ereignisse (onload, onerror, onprogress …). In modernem Code verpackt man den Aufruf daher meist in ein Promise, um ihn mit async/await nutzen zu können.

Wird nur eine Anzeige im selben Dokument benötigt, ist URL.createObjectURL() meist die bessere Wahl: Es ist synchron, verbraucht keinen zusätzlichen Speicher für die Base64-Kodierung und funktioniert auch bei großen Dateien performant.

Parameter

Name	Typ	Default	Beschreibung
$blob Pflicht	Blob \| File		Das `Blob`- oder `File`-Objekt, dessen Inhalt als Data-URL gelesen werden soll. Andere Typen führen zu einem `TypeError`.

Beispiele

Bildvorschau für einen Datei-Upload

// HTML: <input type="file" id="avatar" accept="image/*"> <img id="preview" alt="">
const input = document.querySelector('#avatar');
const preview = document.querySelector('#preview');

input.addEventListener('change', () => {
  const [file] = input.files;
  if (!file || !file.type.startsWith('image/')) return;

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    preview.src = reader.result; // data:image/png;base64,...
  });
  reader.addEventListener('error', () => {
    console.error('Lesen fehlgeschlagen:', reader.error);
  });
  reader.readAsDataURL(file);
});

Promise-Wrapper für async/await

const readAsDataURL = (blob) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.onabort = () => reject(new DOMException('Abgebrochen', 'AbortError'));
    reader.readAsDataURL(blob);
  });

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

data:text/plain;base64,SGFsbG8gV2VsdA==

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

const uploadFile = async (file) => {
  const dataUrl = await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });

  // Präfix "data:<typ>;base64," entfernen
  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 })
  });
  return response.ok;
};

Fortschritt großer Dateien anzeigen

const reader = new FileReader();
const file = new File([new Uint8Array(5_000_000)], 'daten.bin');

reader.onprogress = (event) => {
  if (event.lengthComputable) {
    console.log(`Fortschritt: ${Math.round((event.loaded / event.total) * 100)} %`);
  }
};
reader.onloadend = () => console.log('Fertig, Länge:', reader.result.length);
reader.readAsDataURL(file);

Fortschritt: 100 % Fertig, Länge: 6666704

// Wichtig · Fallstricke

Speicherbedarf: Base64 vergrößert die Daten um ca. 33 %, zusätzlich wird der String vollständig im Speicher gehalten. Für große Dateien oder reine Anzeige besser URL.createObjectURL() verwenden (und später mit URL.revokeObjectURL() freigeben).
Kein direkter Rückgabewert: reader.result ist unmittelbar nach dem Aufruf noch null – immer auf load/loadend warten.
Mehrfachaufruf: Wird die Methode aufgerufen, während derselbe FileReader noch liest (readyState === LOADING), wird ein InvalidStateError ausgelöst. Pro paralleler Datei eine eigene Instanz verwenden.
MIME-Typ: Hat der Blob keinen Typ, lautet das Präfix data:application/octet-stream;base64,. Ein leerer Blob ergibt je nach Browser data: ohne Nutzdaten.
Nicht zur Dekodierung geeignet: Das Präfix muss vor einer Base64-Weiterverarbeitung entfernt werden (bis einschließlich des ersten Kommas).
Sicherheit: Data-URLs von Nutzerdateien (z. B. SVG oder HTML) nicht ungeprüft in innerHTML oder als Link-Ziel einfügen – das kann XSS ermöglichen. Eine Content-Security-Policy muss für <img>-Vorschauen img-src data: erlauben.
Alternative in modernem Code: Blob.prototype.arrayBuffer() bzw. text() liefern Promises, erzeugen aber keine Data-URL. In Web Workern steht zusätzlich FileReaderSync zur Verfügung.

Siehe auch

Blob File FileReader.readAsText() FileReader.readAsArrayBuffer() FileReader.readAsBinaryString()