استخدام axios لارسال form data

إن مكتبة axios حين تمرر لها body فإنها تفترض أنك تريد أن تعمل POST لـJSON وهذا ما ترسله للمخدم، إذا أردت إرسال multipart/form-data يجب عليك إنشاء FormData object وملؤه بالحقول هكذا:

// تعريف متغير ليستقبل formData
const payload = new FormData();
// إعطائه القيم

payload.append('userName', 'usertest');
payload.append('userEmail', 'usertest@gmail.com');
payload.append('file',fileObject) // if you have <input type="file"/> you can get fileObject from inputElement.files[0] if input is not multiple or inputElement.files if it is multiple
axios({
    method: 'post',
    url: '/addUser',
    data: payload
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

لاحظ أننا أزلنا Content-Type header ولا داعي له بل من الخطأ تمريره ﻷن axios عند تمرير FormData فإنها تفهم أن Content-Type يجب أن يكون multipart.

طبعاً أنت تعلم أن multipart يستخدم فقط إن كان هناك file upload أما إذا كانت جميع حقولك عادية حينها لا نمرر FormData object بل نمرر URLSearchParams object بالشكل التالي:

axios({
    method: 'post',
    url: '/addUser',
    data: new URLSearchParams(body) // body is a regular javascript object
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

حينها تمرر axios الـContent-Type header بقيمة application/x-www-form-urlencoded 

أخيراً إن كنت تريد تمرير JSON للسيرفر حينها تقوم باﻵتي:

axios({
    method: 'post',
    url: '/addUser',
    data: body // body is a regular javascript object
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

حينها يكون Content-Type يساوي application/json

مرحباً بك 

يجب تحويل ال payload ل formData قبل إرساله ليكون هكذا 
 

// تعريف متغير ليستقبل formData
var payload = new FormData();
// إعطائه القيم

payload.append('userName', 'usertest');
payload.append('userEmail', 'usertest@gmail.com');

axios({
    method: 'post',
    url: '/addUser',
    data: payload,
  headers: { "Content-Type": "multipart/form-data" },

})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});