Javascript'te Fetch ile File Upload Yaptırmak - Multipart / Form-Data İşlemi

Selamlar,
Fetch kullanarak bir form verisini post ettirmek ve file upload yaptırmak için content type yazmanıza gerek yok. Eğer post ettirmek istediğiniz veri sadece text veri ise (yani içinde file yoksa) o zaman belirtebilirsiniz. Ancak file upload işlemlerinde content type belirtilmemektedir. Çünkü type alanına boundary eklenmektedir. Multipart / form-data işlemlerinde tarayıcınızın konsolunu incelediğinizde gönderdiğiniz request içerisinde otomatik eklenmiş boundary göreceksiniz. Bunu daha iyi anlamak için buradaki konuyu inceleyebilirsiniz.

Genellikle form verisi için kullanılan content type 'multipart/form-data' olarak bilinir. Tarayıcınız file upload işlemlerinde request gönderdiğinde içeriğine otomatik olarak şöyle bir veri ekleniyor:multipart/form-data; boundary=----WebKitFormBoundaryIn312MOjBWdkffIM

File upload işleminde fetch kısmında content type alanında boundary belirtmediğinizde 500 hatası alabilirsiniz. Bu yüzden content type belirtmemekteyiz çünkü tarayıcınız bunu otomatik olarak ekliyor.

Göndermeniz gereken veri şöyle:
async function upload() {
const files = document.querySelector('[name=file]').files;
let form = new FormData();
form.append("file", files[0]);
await fetch('/dosya-yukle', { method: "POST", body: form });
}

Bu şekilde istek gönderdiğinizde işleminiz başarılı olacaktır.

İyi çalışmalar,
Recep

Bu gönderiyi 01.08.2021 14:59:18 tarihinde Rserit düzenledi.