JavaScript Academy · Lektion

Dateien mit Fetch hochladen

Senden Sie Dateien mit FormData an einen Server.

Lektion 4 von 413 Schritte

Dateien mit Fetch hochladen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Dateien mit fetch hochladen

Um Dateien an einen Server zu senden, übertragen Sie mit fetch einen FormData-Body per POST. Der Browser übernimmt für Sie die Codierung als multipart/form-data, einschließlich der Dateiinhalte.

FormData erstellen

Lesen Sie die Datei aus einem Eingabefeld aus und hängen Sie sie zusammen mit weiteren Feldern an ein FormData-Objekt an.

const file = document.querySelector('#picker').files[0];
const data = new FormData();
data.append('avatar', file);
data.append('userId', '42');

console.log(data.has('avatar'));

Der grundlegende POST

Übergeben Sie FormData als body eines fetch-POSTs. Die Antwort ist ein Promise, auf das Sie mit await warten können.

async function upload(data) {
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: data
  });
  console.log(response.status);
}

Content-Type nicht selbst setzen

Ein häufiger Fehler ist das manuelle Setzen von Content-Type. Überlassen Sie dies dem Browser, da der Header die multipart-boundary-Zeichenfolge enthalten muss. Wenn Sie ihn selbst setzen, schlägt der Upload fehl.

const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData
});

console.log('browser added the boundary automatically');

Antwort auslesen

Prüfen Sie nach einem erfolgreichen Upload response.ok und parsen Sie den Body, der häufig JSON enthält.

async function upload(data) {
  const response = await fetch('/api/upload', { method: 'POST', body: data });
  if (!response.ok) {
    throw new Error('upload failed: ' + response.status);
  }
  const result = await response.json();
  console.log(result);
}

Fehler behandeln

Verpacken Sie den Aufruf in try/catch. Beachten Sie, dass fetch nur bei Netzwerkfehlern abgewiesen wird. Deshalb müssen Sie response.ok auf HTTP-Fehlerstatuscodes prüfen.

async function upload(data) {
  try {
    const res = await fetch('/api/upload', { method: 'POST', body: data });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    console.log('uploaded');
  } catch (err) {
    console.log('error:', err.message);
  }
}

Mehrere Dateien hochladen

Hängen Sie mehrere Dateien mit append unter demselben Schlüssel an oder durchlaufen Sie eine Dateiliste, um alle Dateien hinzuzufügen.

const files = document.querySelector('#picker').files;
const data = new FormData();
for (const file of files) {
  data.append('photos', file);
}

console.log(data.getAll('photos').length + ' files queued');

Header wie Auth hinzufügen

Sie können Header wie Authorization hinzufügen, nur nicht Content-Type. Der Body bleibt FormData.

const response = await fetch('/api/upload', {
  method: 'POST',
  headers: { Authorization: 'Bearer token123' },
  body: formData
});

console.log(response.status);

Generierten Blob senden

Sie können auch im Browser erstellte Daten hochladen, nicht nur ausgewählte Dateien. Hängen Sie einen Blob mit einem Dateinamen an, um ein generiertes Dokument zu senden.

const blob = new Blob([JSON.stringify({ ok: true })], {
  type: 'application/json'
});
const data = new FormData();
data.append('report', blob, 'report.json');

await fetch('/api/upload', { method: 'POST', body: data });
console.log('generated file sent');

Upload abbrechen

Verwenden Sie einen AbortController, um einen langsamen Upload abzubrechen, beispielsweise wenn der Benutzer die Seite verlässt.

const controller = new AbortController();
fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
}).catch(e => console.log(e.name));

controller.abort();

Warum das wichtig ist

Die Kombination aus FormData und fetch ist die moderne, standardmäßige Methode zum Hochladen von Dateien: Hängen Sie Felder und Dateien an, senden Sie FormData per POST und lassen Sie den Browser multipart mit der korrekten Boundary codieren. Vermeiden Sie das Setzen von Content-Type, prüfen Sie immer response.ok und räumen Sie Ressourcen auf.

async function submitForm(formEl) {
  const data = new FormData(formEl);
  const res = await fetch('/submit', { method: 'POST', body: data });
  console.log('status', res.status);
}

Schnelltest

Warum sollten Sie den Content-Type-Header beim Senden von FormData mit fetch NICHT manuell setzen?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Dateien mit fetch hochladen

Sie haben gelernt, Dateien an einen Server zu senden:

Hängen Sie Dateien und Felder an ein FormData-Objekt an und übergeben Sie es als body von fetch.
Setzen Sie Content-Type niemals manuell. Der Browser fügt die Multipart-Boundary hinzu.
Prüfen Sie response.ok, da fetch nur bei Netzwerkfehlern abgewiesen wird.
Sie können mehrere Dateien und generierte Blobs senden sowie Uploads mit AbortController abbrechen.

Kostenlos starten

Lerne JavaScript mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 59
Lektionen: 200

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Dateien mit Fetch hochladen“ kostenlos?

Ja — der vollständige Text von „Dateien mit Fetch hochladen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Dateien mit Fetch hochladen“?

Senden Sie Dateien mit FormData an einen Server. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Dateien mit Fetch hochladen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy