reactjs - how - Axios post solicitud para enviar datos del formulario

patch axios

Question

La solicitud POST axios está llegando a la url en el controlador pero estableciendo valores nulos para mi clase POJO, cuando reviso las herramientas de desarrollador en Chrome, la carga útil contiene datos. ¿Qué estoy haciendo mal?

Solicitud POST de Axios:

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

Respuesta del navegador:

Si configuro encabezados como:

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

La solicitud arroja el error

Error al publicar datos multiparte / formulario. Al encabezado de tipo de contenido le falta el límite

Si hago la misma solicitud en cartero, está funcionando bien y establece valores para mi clase POJO.

¿Alguien puede explicar cómo establecer límites o cómo puedo enviar datos de formulario usando axios?

Answer 1

Subir (múltiples) archivos binarios

Las cosas se vuelven complicadas cuando quieres publicar archivos a través de datos 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 headers: formData.getHeaders()
• Necesito usar concat-stream para concat múltiples flujos de archivos
• Utilizo async y await arriba, puedes cambiarlos a declaraciones simples de Promise si no te gustan

Answer 2

Aún más directo:

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

Answer 3

Echa un vistazo a la querystring .

Puede usarlo de la siguiente manera:

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

Answer 4

El método anterior funcionó para mí, pero como era algo que necesitaba con frecuencia, utilicé un método básico para objetos planos. Tenga en cuenta que también estaba usando Vue y no REACT

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

Lo que funcionó para mí hasta que me encontré con estructuras de datos más complejas con objetos anidados y archivos que luego permitieron lo siguiente

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

Answer 5

En mi caso, tuve que agregar el límite al encabezado de la siguiente manera:

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

Esta solución también es útil si está trabajando con React Native.

Answer 6

Puede publicar datos de axios utilizando FormData() como:

var bodyFormData = new FormData();

Y luego agregue los campos al formulario que desea enviar:

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

Si está cargando imágenes, puede usar .append

bodyFormData.append(''image'', imageFile); 

Y luego puede usar el método de publicación axios (puede 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 Here