axios solicitud de envío para enviar datos de formulario

La POST axio POST está presionando la url en el controlador pero estableciendo valores nulos en mi clase POJO, cuando reviso las herramientas de desarrollador en chrome, la carga contiene datos. ¿Qué estoy haciendo mal?

Solicitud POSTE de 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); }); 

Respuesta del navegador:

enter image description here

Si configuro los encabezados como:

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

La solicitud arroja el error

Error al publicar multipart / form-data. El encabezado Content-Type falta un límite

Si realizo la misma solicitud en el cartero, funciona bien y establece valores para mi clase POJO.

¿Alguien puede explicar cómo establecer un límite o cómo puedo enviar datos del formulario usando axios?

Puede publicar datos de axios usando FormData () como:

 var bodyFormData = new FormData(); 

Y luego agregue los campos al formulario que desea enviar:

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

Y luego puedes usar el método de publicación de axios (puedes modificarlo en consecuencia)

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

Puedes leer más aquí

Cargar (varios) archivos binarios

Las cosas se complican cuando desea publicar archivos a través de multipart/form-data , especialmente múltiples archivos binarios. A continuación se muestra un ejemplo de trabajo:

 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) })) 
  • En lugar de headers: {'Content-Type': 'multipart/form-data' } prefiero los headers: formData.getHeaders()
  • Necesito usar concat-stream para concat múltiples flujos de archivos
  • Uso async y await arriba, puede cambiarlos a simples declaraciones Promesa si no los quiere

https://www.npmjs.com/package/axios

Node.js En node.js, puede usar el módulo querystring de la siguiente manera:

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

El método anterior funcionó para mí, pero como era algo que necesitaba a menudo, utilicé un método básico para objetos planos. Nota, yo también estaba usando Vue y no REACT

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

Lo cual funcionó para mí hasta que me encontré con estructuras de datos más complejas con objetos nesteds y archivos que luego dejan a la siguiente

 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; } 
Intereting Posts