JavaScript Academy · leksjon

Laste opp filer med Fetch

Send filer til en server med FormData.

Leksjon 4 av 413 trinn

Laste opp filer med Fetch er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Laste opp med fetch

For å sende filer til en server sender du en FormData-body med fetch og metoden POST. Nettleseren håndterer multipart/form-data-kodingen for deg, inkludert filinnholdet.

Bygge FormData

Hent filen fra et inndatafelt, og legg den til sammen med eventuelle andre felt i et 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 grunnleggende POST-forespørselen

Send FormData som body i en fetch-forespørsel med metoden POST. Svaret er et Promise som du kan vente på med await.

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

Ikke angi Content-Type

En vanlig feil er å angi Content-Type manuelt. La nettleseren angi den, fordi den må inneholde multipart-boundary-strengen. Hvis du angir den selv, fungerer ikke opplastingen.

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

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

Lese svaret

Kontroller response.ok, og analyser body-en, ofte som JSON, etter en vellykket opplasting.

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

Håndtere feil

Pakk kallet inn i try/catch. Vær oppmerksom på at fetch bare avviser Promise-et ved nettverksfeil, så du må kontrollere response.ok for HTTP-feilstatuser.

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

Laste opp flere filer

Legg til flere filer under samme nøkkel med append, eller gå gjennom en filliste i en løkke for å legge til alle.

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

Legge til headere som Auth

Du kan legge til headere som Authorization, men ikke Content-Type. Body-en forblir FormData.

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

console.log(response.status);

Sende en generert Blob

Du kan laste opp data du oppretter i nettleseren, ikke bare filer som er valgt av brukeren. Legg til en Blob med et filnavn for å sende et generert 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');

Avbryte en opplasting

Bruk en AbortController til å avbryte en treg opplasting, for eksempel når brukeren navigerer bort fra siden.

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

controller.abort();

Hvorfor dette er viktig

Kombinasjonen av FormData og fetch er den moderne standardmåten å laste opp filer på: legg til felt og filer, send FormData med POST, og la nettleseren kode multipart med riktig boundary. Unngå å angi Content-Type, kontroller alltid response.ok, og rydd opp etter bruk av ressurser.

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

Kontrollspørsmål

Hvorfor bør du IKKE angi Content-Type-headeren manuelt når du sender en FormData med fetch og POST?

Besvar den i den interaktive leksjonen

Oppsummering: Laste opp filer med fetch

Du har lært å sende filer til en server:

Legg filer og felt til i en FormData, og send den deretter som body i fetch.
Angi aldri Content-Type manuelt; nettleseren legger til multipart-boundary-en.
Kontroller response.ok, fordi fetch bare avviser Promise-et ved nettverksfeil.
Du kan sende flere filer og genererte Blobs, og avbryte opplastinger med AbortController.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Laste opp filer med Fetch» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Laste opp filer med Fetch», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Laste opp filer med Fetch»?

Send filer til en server med FormData. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Laste opp filer med Fetch»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy