JavaScript Academy · Ders

Fetch ile Dosya Yükleme

FormData ile dosyaları sunucuya gönderin.

Fetch ile Dosya Yükleme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Veri Getirme API'siyle Yükleme

Dosyaları bir sunucuya göndermek için FormData gövdesini bir veri getirme API'si isteğiyle POST edersiniz. Tarayıcı, dosya içerikleri de dâhil olmak üzere multipart/form-data kodlamasını sizin için yönetir.

FormData Oluşturma

Dosyayı bir girişten alın ve diğer alanlarla birlikte bir FormData nesnesine ekleyin.

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

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

Temel POST İsteği

FormData'yı bir veri getirme API'si POST isteğinin body değeri olarak iletin. Yanıt, bekleyebileceğiniz bir Promise'tir.

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

Content-Type Belirlemeyin

Yaygın bir hata: Content-Type değerini elle ayarlamak. Çok parçalı verilerin sınır dizesini içermesi gerektiği için bunu tarayıcının ayarlamasına izin verin. Kendiniz ayarlarsanız yükleme bozulur.

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

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

Yanıtı Okuma

Başarılı bir yüklemeden sonra response.ok değerini denetleyin ve gövdeyi, çoğunlukla JavaScript nesne gösterimi biçiminde, ayrıştırın.

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

Hataları Yönetme

Çağrıyı try/catch içine alın. fetch yalnızca ağ hatalarında reddedildiği için HTTP hata durumlarını denetlemek üzere response.ok değerini kontrol etmeniz gerekir.

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

Birden Çok Dosya Yükleme

Birkaç dosyayı append ile aynı anahtar altında ekleyin veya tümünü eklemek için bir dosya listesi üzerinde döngü kurun.

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

Kimlik Doğrulama Gibi Üst Bilgiler Ekleme

Authorization gibi üst bilgiler ekleyebilirsiniz; yalnızca Content-Type eklemeyin. Gövde FormData olarak kalır.

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

console.log(response.status);

Oluşturulan İkili Büyük Nesneyi Gönderme

Yalnızca seçilen dosyaları değil, tarayıcıda oluşturduğunuz verileri de yükleyebilirsiniz. Oluşturulan bir belgeyi göndermek için dosya adıyla birlikte bir ikili büyük nesne ekleyin.

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

Yüklemeyi İptal Etme

Yavaş bir yüklemeyi, örneğin kullanıcı başka bir sayfaya geçtiğinde, iptal etmek için bir AbortController kullanın.

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

controller.abort();

Bu Neden Önemlidir?

FormData ile veri getirme API'sini birleştirmek, dosya yüklemenin modern ve standart yoludur: alanları ve dosyaları ekleyin, FormData'yı POST edin ve çok parçalı verileri doğru sınırla kodlaması için tarayıcıya bırakın. Content-Type değerini ayarlamaktan kaçının, her zaman response.ok değerini denetleyin ve kaynakları temizleyin.

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

Kısa Kontrol

FormData'yı veri getirme API'siyle POST ederken Content-Type üst bilgisini neden elle ayarlamamalısınız?

Özet: Veri Getirme API'siyle Dosya Yükleme

Dosyaları bir sunucuya göndermeyi öğrendiniz:

Dosyaları ve alanları bir FormData nesnesine ekleyin, ardından bunu veri getirme API'sinin body değeri olarak iletin.
Content-Type değerini hiçbir zaman elle ayarlamayın; tarayıcı çok parçalı sınırı ekler.
Veri getirme API'si yalnızca ağ hatalarında reddedildiği için response.ok değerini denetleyin.
Birden çok dosya ve oluşturulan ikili büyük nesneler gönderebilir, ayrıca yüklemeleri AbortController ile iptal edebilirsiniz.

Sıkça Sorulan Sorular

“Fetch ile Dosya Yükleme” dersi ücretsiz mi?

Evet — “Fetch ile Dosya Yükleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Fetch ile Dosya Yükleme” dersinde ne öğreneceğim?

FormData ile dosyaları sunucuya gönderin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Fetch ile Dosya Yükleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön