axios post request pour envoyer les données du formulaire

Question

axios POST La requête atteint l'url sur le contrôleur mais donne des valeurs nulles à ma classe POJO. Lorsque je passe par les outils de développement dans Chrome, la charge utile contient des données. Qu'est-ce que je fais de mal ?

Requête POST d'Axios :

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

Réponse du navigateur :

Si je configure les en-têtes comme :

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

La requête génère l'erreur suivante

Erreur dans l'affichage de multipart/form-data. L'en-tête Content-Type n'est pas délimité

Si je fais la même demande dans postman, cela fonctionne bien et définit des valeurs pour ma classe POJO.

Quelqu'un peut-il expliquer comment définir les limites ou comment envoyer les données du formulaire en utilisant axios.

Answer 1

Vous pouvez afficher les données axios en utilisant FormData() comme :

var bodyFormData = new FormData();

Puis, ajoutez les champs au formulaire que vous voulez envoyer :

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

Si vous téléchargez des images, vous pouvez utiliser la méthode suivante .append

bodyFormData.append('image', imageFile); 

Et ensuite vous pouvez utiliser la méthode axios post (vous pouvez la modifier en conséquence).

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

Vous pouvez lire la suite Ici

Answer 2

Dans mon cas, j'ai dû ajouter le frontière à la en-tête comme les suivantes :

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

Cette solution est également utile si vous travaillez avec React Native.

Answer 3

Vérifiez chaîne d'interrogation .

Vous pouvez l'utiliser comme suit :

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

Answer 4

Télécharger des fichiers binaires (multiples)

Les choses se compliquent lorsque vous voulez poster des fichiers via multipart/form-data notamment des fichiers binaires multiples. Voici un exemple de fonctionnement :

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

const formData = new FormData()
formData.append('json', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('attachment', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
formData.pipe(concat({ encoding: 'buffer' }, async data => {
  const r = await rc.post('/restapi/v1.0/account/~/extension/~/fax', data, {
    headers: formData.getHeaders()
  })
  console.log(r.data)
}))

• Au lieu de headers: {'Content-Type': 'multipart/form-data' } Je préfère headers: formData.getHeaders()
• J'ai besoin d'utiliser concat-stream pour concaténer plusieurs flux de fichiers
• J'utilise async et await ci-dessus, vous pouvez les changer en déclarations Promise si vous ne les aimez pas.

Answer 5

Encore plus simple :

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