FormData ile resim yüklemede tarayıcıya boundary ayarını bırak

Resim yüklemede sık yapılan hata: Content-Type başlığını el ile `multipart/form-data` olarak ayarlamak. Böyle yaptığında tarayıcının eklemesi gereken boundary (sınır belirteci) kaybolur ve sunucu isteği işleyemez.

Doğru yol basit. FormData nesnesi oluştur ve dosyayı ekle:

1const data = new FormData();
2data.append("image", file);
3
4fetch("/upload", {
5method: "POST",
6body: data
7// Content-Type başlığını YAZMA
8});

Tarayıcı otomatik olarak `Content-Type: multipart/form-data; boundary=...` başlığını ekler. Boundary, form parçalarını ayırmak için gerekli bir rastgele string'dir. El ile başlık yazarsan, boundary eksik kalır ve sunucu veriyi ayrıştıramaz.

Eğer isteğin başlıklarını kontrol etmek istiyorsan, tarayıcı geliştirici araçlarını (DevTools) aç, Network sekmesine bak ve isteğin başlıklarını gözlemle. Küçük, test amaçlı bir görsel kullanarak deneme yap, üretim verisiyle hata ayıklama yapma.

Shared bir request yardımcı fonksiyonun varsa, o fonksiyonun JSON başlığı koşulsuz olarak eklemediğini kontrol et. FormData gönderilecekse, Content-Type başlığını hiç ekleme ya da koşullu ekle.

Yetkilendirme başlıkları (Authorization) gerekiyorsa, onları koru ve eklemeye devam et. Hata raporlarında body türünü ve başlık yapısını belirt; kimlik bilgilerini hiç kopyalama.

Morphio gibi görsel işleme projeleri bu detaya dikkat ediyor. FormData'nın boundary mekanizmasını anlamak, resim ve dosya yüklemelerinde hata ayıklamayı çok daha hızlı hale getirir.