PricingLoginStart free
React Academy · leksjon

Laste opp filer til et backend-API

Bruk FormData og fetch til å sende filer med POST og følge med på fremdriften for opplastingen.

Leksjon 4 av 413 trinn

Laste opp filer til et backend-API er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen bruker De FormData-API-et og fetch til å POST-e filer til en backend, spore fremdriften for opplastingen med XMLHttpRequest og vise opplastingsstatus i React.

FormData-API-et

FormData er et nettleser-API som bygger forespørselskropper med multipart/form-data — formatet servere forventer ved filopplasting. Legg filen og eventuelle metadatafelt til i et FormData-objekt.
const formData = new FormData();
formData.append('file', selectedFile);
formData.append('description', 'Profile photo');

Laste opp med fetch

Send FormData-objektet som body til fetch. IKKE angi Content-Type manuelt — nettleseren angir automatisk riktig multipart-grense.
const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData,
  // Do not set Content-Type header here!
});

Håndtering av opplastingsstatus

Spor opplastingsstatus med tre tilstandsvariabler: `uploading` (boolsk), `progress` (0–100) og `error` (streng eller null). Vis lastesymboler, fremdriftslinjer og feilmeldinger basert på disse verdiene.
const [uploading, setUploading] = useState(false);
const [progress, setProgress] = useState(0);
const [error, setError] = useState(null);

Fremdrift for opplasting med XMLHttpRequest

fetch-API-et støtter ikke hendelser for fremdrift ved opplasting. Bruk `upload.onprogress`-hendelsen til XMLHttpRequest for å hente prosentvise oppdateringer.
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
  if (e.lengthComputable) {
    setProgress(Math.round((e.loaded / e.total) * 100));
  }
};
xhr.open('POST', '/api/upload');
xhr.send(formData);

Pakke XHR inn i et Promise

Pakk XMLHttpRequest-kallet inn i et Promise, slik at De kan vente på det med await og bruke feilhåndtering med async/await.
function uploadFile(file) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = () => resolve(xhr.response);
    xhr.onerror = () => reject(new Error('Upload failed'));
    xhr.upload.onprogress = (e) => setProgress(Math.round(e.loaded / e.total * 100));
    xhr.open('POST', '/api/upload');
    xhr.send(new FormData().set && (() => { const f = new FormData(); f.append('file', file); xhr.send(f); })());
  });
}

Håndtere serversvaret

Analyser serverens JSON-svar etter en vellykket opplasting. Oppdater brukergrensesnittets tilstand med URL-en eller ID-en som returneres.
const res = await fetch('/api/upload', { method: 'POST', body: fd });
if (!res.ok) throw new Error('Upload failed');
const { url } = await res.json();
setUploadedUrl(url);

Feilhåndtering

Fang alltid opp nettverks- og serverfeil. Vis en brukervennlig feilmelding og gjør det mulig å prøve på nytt. Tilbakestill fremdrifts- og opplastingsstatusen i catch-blokken.
try {
  setUploading(true);
  await uploadToServer(file);
} catch (err) {
  setError(err.message);
} finally {
  setUploading(false);
}

Avbryte en opplasting

Bruk en AbortController sammen med fetch for å avbryte en pågående opplasting. Lagre kontrolleren i en ref, slik at De kan kalle abort() fra en avbryt-knapp.
const abortRef = useRef();

const start = async () => {
  abortRef.current = new AbortController();
  await fetch('/api/upload', { body: fd, signal: abortRef.current.signal });
};
const cancel = () => abortRef.current?.abort();

Laste opp flere filer

Last opp flere filer parallelt med Promise.all eller sekvensielt med en for-of-løkke. Spor individuell fremdrift for hver fil i et objekt med filnavnet som nøkkel.

Kort kontroll

Hvorfor bør De IKKE angi Content-Type-headeren manuelt når De bruker fetch med FormData?
Besvar den i den interaktive leksjonen

Oppsummering

Bruk FormData til å bygge nyttelaster for opplasting. Bruk fetch uten Content-Type for automatisk multipart-grense. Bruk XMLHttpRequests upload.onprogress for å spore fremdriften. Håndter feil på en god måte, og støtt avbryting med AbortController.

Kurset er fullført

Gratulerer! De har fullført **Uncontrolled Components & File Uploads**. Nå kan De håndtere ukontrollerte inndatafelt, filvalg, dra-og-slipp og multipart-opplastinger med sporing av fremdrift.
Gratis å komme i gang

Lær deg React 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
88
Leksjoner
324
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Laste opp filer til et backend-API» gratis?

Ja – hele teksten i «Laste opp filer til et backend-API» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Laste opp filer til et backend-API»?

Bruk FormData og fetch til å sende filer med POST og følge med på fremdriften for opplastingen. Du øver på React 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 React Academy?

Ingen tidligere erfaring er nødvendig. React 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 til et backend-API»?

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 React Academy-leksjonen?

Ja. Alle React 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

  1. Ukontrollerte inndata med useRef
  2. Filinndata og lese fildata
  3. Brukergrensesnitt for dra-og-slipp-filopplasting
  4. Laste opp filer til et backend-API
← Tilbake til React Academy