POSTżądanie axios uderza w adres URL na kontrolerze, ale ustawienie wartości null dla mojej klasy POJO, kiedy przeglądam narzędzia programistyczne w chrome, ładunek zawiera dane. Co ja robię źle?

Żądanie Axios POST:

var body = {
    userName: 'Fred',
    userEmail: '[email protected]'
}

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

Odpowiedź przeglądarki:

Jeśli ustawię nagłówki jako:

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

Żądanie zgłasza błąd

Błąd podczas publikowania danych wieloczęściowych / formularzy. Nagłówek Content-Type nie ma granicy

Jeśli zrobię to samo w listonoszu, działa dobrze i ustawia wartości dla mojej klasy POJO.

Czy ktoś może wyjaśnić, jak ustawić granicę lub jak wysłać dane formularza za pomocą axios.

Możesz publikować dane axios przy użyciu FormData (), takich jak:

var bodyFormData = new FormData();

A następnie dodaj pola do formularza, który chcesz wysłać:

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

Jeśli przesyłasz obrazy, możesz chcieć użyć .append

bodyFormData.append('image', imageFile); 

Następnie możesz użyć metody axios post (możesz ją odpowiednio zmienić)

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);
    });

Możesz przeczytać więcej tutaj

Sprawdź querystring .

Możesz użyć tego w następujący sposób:

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

W moim przypadku musiałem dodać granicę do nagłówka w następujący sposób:

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}`,
        },
    });

To rozwiązanie jest również przydatne, jeśli pracujesz z React Native.

Prześlij (wiele) plików binarnych

Node.js

Sprawy komplikują się, gdy chcesz publikować pliki multipart/form-data, zwłaszcza wiele plików binarnych. Poniżej znajduje się działający przykład:

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()
})

• Zamiast tego headers: {'Content-Type': 'multipart/form-data' }wolęheaders: formData.getHeaders()
• Używam asynci awaitpowyżej, możesz je zmienić na proste oświadczenia Obietnicy, jeśli ich nie lubisz

Nowo dodana treść poniżej:

Przeglądarka

Przeglądarka FormDataróżni się od „formularza-danych” pakietu NPM. Poniższy kod działa dla mnie w przeglądarce:

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)

Jeszcze bardziej proste:

axios.post('/addUser',{
    userName: 'Fred',
    userEmail: '[email protected]'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Wykorzystanie formatu application / x-www-form-urlencoded w axios

Domyślnie axios serializuje obiekty JavaScript do JSON. Aby zamiast tego przesłać dane w formacie application / x-www-form-urlencoded, możesz użyć jednej z następujących opcji.

Przeglądarka

W przeglądarce można użyć interfejsu API URLSearchParams w następujący sposób:

const params = new URLSearchParams ();

params.append („param1”, „wartość1”);

params.append („param2”, „wartość2”);

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

Zauważ, że URLSearchParams nie jest obsługiwany przez wszystkie przeglądarki (patrz caniuse.com), ale dostępna jest funkcja wielokrotnego wypełniania (pamiętaj, aby wypełnić globalne środowisko).

Alternatywnie możesz kodować dane za pomocą biblioteki qs:

const qs = wymagany („qs”);

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

Lub w inny sposób (ES6),

import qs z „qs”;

const data = {'bar': 123};

const options = {

metoda: „POST”,

nagłówki: {'content-type': 'application / x-www-form-urlencoded'},

data: qs.stringify (dane),

url};

axios (opcje);

Sposób działania ES6 2020

Mając formularz w html powiązałem dane w następujący sposób:

DANE:

form: {
   name: 'Joan Cap de porc',
   email: '[email protected]',
   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')
  }
}

Powyższa metoda działała dla mnie, ale ponieważ była to rzecz, której często potrzebowałem, zastosowałem podstawową metodę dla płaskiego obiektu. Uwaga: używałem również Vue, a nie REACT

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

Co działało dla mnie, dopóki nie natrafiłem na bardziej złożone struktury danych z zagnieżdżonymi obiektami i plikami, które następnie pozwoliły na następujące

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: "[email protected]",
      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);
      });
  };