JavaScript Academy · Oppitunti

Tiedostojen lataaminen Fetchillä

Lähettäkää tiedostoja palvelimelle FormDatan avulla.

Oppitunti 4/413 vaihetta

Tiedostojen lataaminen Fetchillä on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Lähettäminen fetchillä

Lähettääksenne tiedostoja palvelimelle POSTatkaa FormData-runko fetch-kutsulla. Selain huolehtii multipart/form-data-koodauksesta puolestanne, mukaan lukien tiedostojen sisällön.

FormDatan muodostaminen

Kerätkää tiedosto syötekentästä ja lisätkää se muiden kenttien kanssa FormData-objektiin.

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

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

Perusmuotoinen POST

Välittäkää FormData fetch-kutsun POST-pyynnön body-ominaisuudeksi. Vastaus on Promise, jota voitte odottaa.

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

Älkää määrittäkö Content-Type-otsaketta

Yleinen virhe on määrittää Content-Type itse. Antakaa selaimen määrittää se, koska sen on sisällettävä multipart-boundary-merkkijono. Jos määritätte sen itse, lähetys ei toimi.

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

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

Vastauksen lukeminen

Tarkistakaa response.ok ja jäsentäkää runko, joka on usein JSON-muodossa, onnistuneen lähetyksen jälkeen.

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

Virheiden käsittely

Käärikää kutsu try/catch-rakenteeseen. Huomioikaa, että fetch hylkää Promisen vain verkkovirheiden yhteydessä, joten HTTP-virhetilanteet on tarkistettava response.ok-ominaisuudella.

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

Useiden tiedostojen lähettäminen

Lisätkää useita tiedostoja samalla avaimella append-metodilla tai käykää tiedostolista silmukassa läpi ja lisätkää ne kaikki.

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

Otsakkeiden, kuten Auth, lisääminen

Voitte lisätä otsakkeita, kuten Authorization-otsakkeen, mutta ette Content-Type-otsaketta. Runko säilyy FormDatana.

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

console.log(response.status);

Luodun Blobin lähettäminen

Voitte lähettää selaimessa luotua dataa, ei ainoastaan valittuja tiedostoja. Lisätkää Blob tiedostonimen kanssa lähettääksenne luodun dokumentin.

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

Lähetyksen keskeyttäminen

Käyttäkää AbortController-objektia hitaan lähetyksen peruuttamiseen esimerkiksi silloin, kun käyttäjä siirtyy toiselle sivulle.

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

controller.abort();

Miksi tämä on tärkeää

FormDatan ja fetchin yhdistäminen on nykyaikainen ja vakiintunut tapa lähettää tiedostoja: lisätkää kentät ja tiedostot, POSTatkaa FormData ja antakaa selaimen koodata multipart-tiedot oikean boundary-merkkijonon kanssa. Älkää määrittäkö Content-Type-otsaketta, tarkistakaa aina response.ok ja vapauttakaa resurssit käytön jälkeen.

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

Pikainen tarkistus

Miksi Content-Type-otsaketta EI pidä määrittää itse, kun lähetätte FormDatan POST-pyynnöllä fetchin avulla?

Vastaa interaktiivisessa oppitunnissa

Kertaus: tiedostojen lähettäminen fetchillä

Opitte lähettämään tiedostoja palvelimelle:

Lisätkää tiedostot ja kentät FormData-objektiin ja välittäkää se fetch-kutsun body-ominaisuudeksi.
Älkää koskaan määrittäkö Content-Type-otsaketta itse, vaan antakaa selaimen lisätä multipart boundary.
Tarkistakaa response.ok, koska fetch hylkää Promisen vain verkkovirheiden yhteydessä.
Voitte lähettää useita tiedostoja ja luotuja Blobeja sekä peruuttaa lähetyksiä AbortController-objektilla.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tiedostojen lataaminen Fetchillä” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tiedostojen lataaminen Fetchillä”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tiedostojen lataaminen Fetchillä”?

Lähettäkää tiedostoja palvelimelle FormDatan avulla. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Tiedostojen lataaminen Fetchillä”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy