axios POSTisteği denetleyicideki url'ye vuruyor ancak POJO sınıfım için null değerleri ayarlıyorum, krom geliştirici araçlarına baktığımda yük veri içeriyor. Neyi yanlış yapıyorum?

Axios POST Talebi:

var body = {
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
}

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

Tarayıcı Yanıtı:

Üstbilgileri şu şekilde ayarlarsam:

headers:{
  Content-Type:'multipart/form-data'
}

İstek hata veriyor

Çok parçalı / form verileri gönderilirken hata oluştu. İçerik Türü üstbilgisinde sınır eksik

Postacıda aynı isteği yaparsam iyi çalışır ve POJO sınıfım için değerleri ayarlar.

Herkes sınırın nasıl ayarlanacağını veya axios kullanarak form verilerini nasıl gönderebileceğimi açıklayabilir mi?

Axios verilerini FormData () kullanarak aşağıdaki gibi gönderebilirsiniz :

var bodyFormData = new FormData();

Ardından alanları göndermek istediğiniz forma ekleyin:

bodyFormData.set('userName', 'Fred');

Resim yüklüyorsanız kullanmak isteyebilirsiniz .append

bodyFormData.append('image', imageFile); 

Ve sonra axios post yöntemini kullanabilirsiniz (Buna göre değiştirebilirsiniz)

axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    headers: {'Content-Type': 'multipart/form-data' }
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

Daha okuyabilirsiniz Burada

Sorgu dizesine göz atın .

Aşağıdaki gibi kullanabilirsiniz:

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

Benim durumumda ben eklemek zorunda sınır için başlığında aşağıdaki gibi:

const form = new FormData();
    formData.append(item.name, fs.createReadStream(pathToFile));

    const response = await axios({
        method: 'post',
        url: 'http://www.yourserver.com/upload',
        data: form,
        headers: {
        'content-type': `multipart/form-data; boundary=${form._boundary}`,
        },
    });

Bu çözüm, React Native ile çalışıyorsanız da yararlıdır.

(Birden çok) ikili dosya yükle

node.js

multipart/form-dataÖzellikle birden çok ikili dosya yoluyla dosya göndermek istediğinizde işler karmaşıklaşır . Aşağıda çalışan bir örnek verilmiştir:

const FormData = require('form-data')
const fs = require('fs')
const path = require('path')

const formData = new FormData()
formData.append('files[]', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('files[]', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData, {
  headers: formData.getHeaders()
})

• headers: {'Content-Type': 'multipart/form-data' }Tercih yerineheaders: formData.getHeaders()
• Ben kullanıyorum asyncve awaityukarıda, onları beğenmezseniz düz Promise ifadeleri olarak değiştirebilirsiniz

Aşağıya yeni eklenen içerik:

Tarayıcı

Tarayıcı FormData, NPM paketi 'form-data' dan farklıdır. Aşağıdaki kod tarayıcıda benim için çalışıyor:

HTML:

<input type="file" id="image" accept="image/png"/>

JavaScript:

const formData = new FormData()

// add a non-binary file
formData.append('files[]', new Blob(['{"hello": "world"}'], { type: 'application/json' }), 'request.json')

// add a binary file
const element = document.getElementById('image')
const file = element.files[0]
formData.append('files[]', file, file.name)
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData)

Daha da anlaşılır:

axios.post('/addUser',{
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Axios'ta application / x-www-form-urlencoded biçimini kullanma

Axios, varsayılan olarak JavaScript nesnelerini JSON'a serileştirir. Bunun yerine application / x-www-form-urlencoded biçiminde veri göndermek için aşağıdaki seçeneklerden birini kullanabilirsiniz.

Tarayıcı

Bir tarayıcıda URLSearchParams API'sını aşağıdaki gibi kullanabilirsiniz:

const params = yeni URLSearchParams ();

params.append ('param1', 'değer1');

params.append ('param2', 'değer2');

axios.post ('/ foo', params);

URLSearchParams'ın tüm tarayıcılar tarafından desteklenmediğini (bkz. Caniuse.com), ancak kullanılabilir bir çoklu dolgu olduğunu unutmayın (genel ortamı çoklu doldurduğunuzdan emin olun).

Alternatif olarak, veriyi qs kütüphanesini kullanarak kodlayabilirsiniz:

const qs = gerektirir ('qs');

axios.post ('/ foo', qs.stringify ({'bar': 123}));

Veya başka bir şekilde (ES6),

q'ları 'qs' den içe aktar;

const data = {'bar': 123};

const seçenekleri = {

yöntemi: 'POST',

başlıklar: {'content-type': 'application / x-www-form-urlencoded'},

data: qs.stringify (veri),

url,};

AXIOS (seçenekler);

2020 ES6 yapmanın yolu

Html şeklinde olması gibi verilerde bağlanmış:

VERİ:

form: {
   name: 'Joan Cap de porc',
   email: 'fake@email.com',
   phone: 2323,
   query: 'cap d\ou'
   file: null,
   legal: false
},

onsubmit:

async submitForm() {
  const formData = new FormData()
  Object.keys(this.form).forEach((key) => {
    formData.append(key, this.form[key])
  })

  try {
    await this.$axios.post('/ajax/contact/contact-us', formData)
    this.$emit('formSent')
  } catch (err) {
    this.errors.push('form_error')
  }
}

Yukarıdaki yöntem benim için çalıştı ama sık sık ihtiyaç duyduğum bir şey olduğundan, düz nesne için temel bir yöntem kullandım. Not, ben de Vue kullanıyordum ve REACT değil

packageData: (data) => {
  const form = new FormData()
  for ( const key in data ) {
    form.append(key, data[key]);
  }
  return form
}

İç içe geçmiş nesneler ve dosyalar ile daha karmaşık veri yapılarına rastlayana kadar benim için çalıştı.

packageData: (obj, form, namespace) => {
  for(const property in obj) {
    // if form is passed in through recursion assign otherwise create new
    const formData = form || new FormData()
    let formKey

    if(obj.hasOwnProperty(property)) {
      if(namespace) {
        formKey = namespace + '[' + property + ']';
      } else {
        formKey = property;
      }

      // if the property is an object, but not a File, use recursion.
      if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
        packageData(obj[property], formData, property);
      } else {
        // if it's a string or a File
      formData.append(formKey, obj[property]);
      }
    }
  }
  return formData;
}

import axios from "axios";
import qs from "qs";   

const url = "https://yourapplicationbaseurl/api/user/authenticate";
    let data = {
      Email: "testuser@gmail.com",
      Password: "Admin@123"
    };
    let options = {
      method: "POST",
      headers: { "content-type": "application/x-www-form-urlencoded" },
      data: qs.stringify(data),
      url
    };
    axios(options)
      .then(res => {
        console.log("yeh we have", res.data);
      })
      .catch(er => {
        console.log("no data sorry ", er);
      });
  };