e
sv

Axios Multipart Form Data- Javascript ile Form Üzerinden Dosya Gönderme

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Bunlardan herhangi birini, isteğe bağlı olan “ enctype ” niteliği aracılığıyla HTML form etiketimize dahil edebiliriz.

Bunları kullanmak oldukça basittir ve büyük olasılıkla hepimiz bununla HTML etiketi- <form> ile karşılaşmışızdır. Varsayılan, işini iyi yaptığı için genellikle özniteliği atlarız.

Çok parçalı veri formunu göndermek için kodlama türünün ayarlanması gerekir. Ve Axios bunu başarmanın birkaç yolunu sunar. enctype kurarken her biri eşit derecede verimli olduğundan hiçbiri diğerinden daha iyi olarak kabul edilemez.

Varsayılan global kodlama türü, aşağıda belirtildiği gibi Axios kullanılarak ayarlanabilir. Tüm Axios istekleri için kodlama türünü form-data türünde yapacaktır.

İkinci yöntemde, tüm ayrı istekler için kodlama türünü tanımlamak için başlıkları değiştirebiliriz. Bunu aşağıdaki kodu kullanarak yapabiliriz:

Son yöntem muhtemelen en basit olanıdır. Yapmamız gereken, belirli bir <form> etiketinde enctype ayarlamaktır. Bu formun kodlama türü, yalnızca verilen komutları yazarak Axios tarafından benimsenecektir:

İki girişli bir form oluşturalım. Biri kullanıcı adını göndermek, diğeri ise bir profil resmi seçmek içindir:

Axios’u kullanmazsak, varsayılan olaylar ortaya çıkacaktır. “Gönder” düğmesine tıkladığımızda /update profile uç noktasına bir POST isteği gönderilecek. Ancak, varsayılan ayarları geçersiz kılmak için düğmeye bir olay dinleyicisi eklenebilir. Axios’un istekleri asenkron olduğundan, başlıklar değiştirilebilir ve istekler özelleştirilebilir.

Express, olabildiğince mükemmel bir yazılım olmasına rağmen, bazı ara katman yazılımı genişletmeleri ona daha fazla zevk katar. Bu nedenle, işlevini genişletmek için üstüne sayısız ara katman yazılımı kurabiliriz.

Express’in npm aracılığıyla kurulumu son derece basittir. express-file upload ara yazılımı, dosya yüklemeyi işlemek için kullanılabilir. npm ile de kolayca kurabiliriz:

Formun gönderdiği veriler, istek işleyicisinin ilettiği isteği içerir. Tüm veriler, bir username gibi kurulum alanlarında bulunur. req nesnesinin dosyalar alanı tüm dosyaları içerir. Bu nedenle username the req.body.username ve the req.files.user picture aracılığıyla yüklenen dosya üzerinden alabiliriz.

Form HTML sayfası aracılığıyla gönderildikten sonra API bir istek alır. Ve verilen çıktı konsolda üretilir:

Dosyayla ilgili tüm bilgiler, adı, kodlama türü ve çok daha fazlası, req.files.user picture oturum açmışsa döndürülür.

Çok parçalı form verileri, veri yükleme verimliliğini büyük ölçüde artırdı. Tek bir nesneyi içeriğin parçaları olarak yükleyebiliriz. Bu, içeriğin herhangi bir bölümünü bağımsız olarak istediğimiz sırada yüklememizi sağlar. Ayrıca, başarısız olan kısım, belgelerin diğer kısımlarını etkilemeden yeniden iletilebilir. Bu nedenle, herhangi bir şekilde işlemenin yavaşlamasına izin vermez.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Axios Multipart Form Data- Javascript ile Form Üzerinden Dosya Gönderme