web-dev-qa-db-fra.com

axios post demande d'envoyer des données de formulaire

la requête axios POST frappe l'URL du contrôleur mais définit des valeurs null pour ma classe POJO. Lorsque je parcours les outils de développement en chrome, la charge contient des données. Qu'est-ce que je fais mal?

Axios POST Requête: 

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

Réponse du navigateur:

enter image description here

Si je mets les en-têtes comme:

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

La demande lève l'erreur

Erreur lors de la publication de données multipart/form. Limite manquante dans l'en-tête Content-Type

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

Quelqu'un peut-il expliquer comment définir une limite ou comment puis-je envoyer des données de formulaire à l'aide d'axios?.

reactjsreact-reduxaxiosajaxformaxios-cookiejar-support
111
Srikanth Gowda

Vous pouvez publier des données axios en utilisant FormData () comme:

var bodyFormData = new FormData();

Et ajoutez ensuite les champs au formulaire que vous souhaitez envoyer:

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

Si vous téléchargez des images, vous pouvez utiliser .append

bodyFormData.append('image', imageFile);

Et puis vous pouvez utiliser la méthode axios post (vous pouvez le 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 en lire plus ici

180
Aaqib

Départ chaîne de requête .

Vous pouvez l'utiliser comme suit:

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

Dans mon cas, j'ai dû ajouter le limite au en-tête comme suit:

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.

14
Luiz Dias

Télécharger (plusieurs) fichiers binaires

Les choses se compliquent lorsque vous voulez poster des fichiers via multipart/form-data, en particulier plusieurs fichiers binaires. Voici un exemple de travail:

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 simples déclarations Promise si vous ne les aimez pas.
8
Tyler Long

Encore plus simple:

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

La méthode ci-dessus a fonctionné pour moi, mais comme c'était quelque chose dont j'avais souvent besoin, j'ai utilisé une méthode de base pour les objets plats. Notez que j’utilisais aussi Vue et non REACT

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

Ce qui a fonctionné pour moi jusqu'à ce que je rencontre des structures de données plus complexes avec des objets et des fichiers imbriqués

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)) {
        objectToFormData(obj[property], formData, property);
      } else {
        // if it's a string or a File
      formData.append(formKey, obj[property]);
      }
    }
  }
  return formData;
}
1
Juan Pablo Ugas