JavaScript Academy · Lektion

Ladda upp filer med Fetch

Skicka filer till en server med FormData.

Lektion 4 av 413 steg

Ladda upp filer med Fetch är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Ladda upp med fetch

För att skicka filer till en server skickar ni en FormData-body med fetch. Webbläsaren hanterar kodningen till multipart/form-data åt er, inklusive filinnehållet.

Skapa FormData

Samla in filen från ett inmatningsfält och lägg till den, tillsammans med eventuella andra fält, i ett FormData-objekt.

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

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

Den grundläggande POST-begäran

Skicka FormData som body i en POST-begäran med fetch. Svaret är ett Promise som ni kan invänta med await.

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

Ange inte Content-Type

Ett vanligt misstag är att ange Content-Type manuellt. Låt webbläsaren ange det, eftersom det måste innehålla multipartens boundary-sträng. Om ni anger det själva går uppladdningen sönder.

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

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

Läsa svaret

Kontrollera response.ok och tolka innehållet, ofta som JSON, efter en lyckad uppladdning.

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);
}

Hantera fel

Omslut anropet i try/catch. Observera att fetch bara avvisar sitt Promise vid nätverksfel, så ni måste kontrollera response.ok för HTTP-felstatusar.

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);
  }
}

Ladda upp flera filer

Lägg till flera filer under samma nyckel med append, eller loopa över en fillista för att lägga till dem alla.

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');

Lägga till headers som Auth

Ni kan lägga till headers som Authorization, men inte Content-Type. Begärans body förblir FormData.

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

console.log(response.status);

Skicka en genererad Blob

Ni kan ladda upp data som ni skapar i webbläsaren, inte bara filer som har valts. Lägg till en Blob med ett filnamn för att skicka ett genererat dokument.

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');

Avbryta en uppladdning

Använd en AbortController för att avbryta en långsam uppladdning, till exempel när användaren navigerar bort.

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

controller.abort();

Varför detta är viktigt

Kombinationen av FormData och fetch är det moderna standardsättet att ladda upp filer: lägg till fält och filer, skicka FormData med POST och låt webbläsaren koda multipart med rätt boundary. Undvik att ange Content-Type, kontrollera alltid response.ok och städa upp resurser.

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

Snabb kontroll

Varför ska ni INTE ange headern Content-Type manuellt när ni skickar ett FormData-objekt med fetch via POST?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Ladda upp filer med fetch

Ni har lärt er att skicka filer till en server:

Lägg till filer och fält i en FormData och skicka den sedan som fetch-anropets body.
Ange aldrig Content-Type manuellt; webbläsaren lägger till multipartens boundary.
Kontrollera response.ok eftersom fetch endast avvisar sitt Promise vid nätverksfel.
Ni kan skicka flera filer och genererade Blobs samt avbryta uppladdningar med AbortController.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Ladda upp filer med Fetch” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Ladda upp filer med Fetch”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Ladda upp filer med Fetch”?

Skicka filer till en server med FormData. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Ladda upp filer med Fetch”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy