es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Enviando FormData desde ReactJs a un controlador NodeJs usando axios

31 Jul, 2023 Programación

Tengo un objeto JS en el siguiente formato que quiero enviar al backend. He implementado algún código, pero en el controlador de Node.js dice hotel is undefined. El código que he escrito es el siguiente:

let hotel = new FormData();
hotel.append('name', data.append);
hotel.append('slug', data.slug);
hotel.append('logo', data.logo);
hotel.append('coverAvatar', data.coverAvatar);
hotel.append('designs', [{ name: `${+new Date()}`, url: localStorage.getItem('initialDesign') }])
hotel.append('products', [...selectedVariants]);

axios.post(`${baseURL}/hotel`, { hotel },{
  headers: {
    'Authorization': localStorage.getItem('_AUTH_TOKEN'),
    'Content-Type': 'multipart/form-data'
  }})
  .then(response => {
    console.log({ response });
  })
  .catch(err => {
    console.log('err', err);
  })

Estoy utilizando multipart/form-data porque el logotipo (logo) y la imagen de portada (coverAvatar) son resultados de <input type='file'>

Mi formato de datos:

{
  "name": "preshan hotel 2",
  "logo": {file},
  "coverAvatar": {file},
  "rooms": [{
    "name": "tempDesign",
    "url": "https://picsum.photos/600/800"
  }],
  "facilities": [
    { "facilityId": "61ceb3931b1b68fe90827f23", "facilityMappings": ["61ceb39b1b1b68fe90827f2c", "61ceb39b1b1b68fe90827f41"] },
    { "facilityId": "61ceb3ca1b1b68fe90827f47", "facilityMappings": ["61ceb3ca1b1b68fe90827f50","61ceb3ca1b1b68fe90827f58", "61ceb3ca1b1b68fe90827f56"] },
    { "facilityId": "61ceb3e41b1b68fe90827f5d", "facilityMappings": ["61ceb3e41b1b68fe90827f5f"]}
  ]
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código es que el objeto hotel se está enviando como un objeto anidado dentro de otro objeto. En el método axios.post, al enviar los datos, { hotel } debería cambiarse solo a hotel. Esto enviará el objeto hotel directamente, sin estar anidado dentro de otro objeto.

    Además, hay un error tipográfico en la línea hotel.append('romms', ...), debería ser hotel.append('rooms', ...).

    Aquí está el código modificado:

    let hotel = new FormData();
hotel.append('name', data.append);
hotel.append('slug', data.slug);
hotel.append('logo', data.logo);
hotel.append('coverAvatar', data.coverAvatar);
hotel.append('rooms', [{ name: `${+new Date()}`, url: localStorage.getItem('initialDesign') }]);
hotel.append('facilities', [
  { "facilityId": "61ceb3931b1b68fe90827f23", "facilityMappings": ["61ceb39b1b1b68fe90827f2c", "61ceb39b1b1b68fe90827f41"] },
  { "facilityId": "61ceb3ca1b1b68fe90827f47", "facilityMappings": ["61ceb3ca1b1b68fe90827f50","61ceb3ca1b1b68fe90827f58", "61ceb3ca1b1b68fe90827f56"] },
  { "facilityId": "61ceb3e41b1b68fe90827f5d", "facilityMappings": ["61ceb3e41b1b68fe90827f5f"]}
]);

axios.post(`${baseURL}/hotel`, hotel,{
  headers: {
    'Authorization': localStorage.getItem('_AUTH_TOKEN'),
    'Content-Type': 'multipart/form-data'
  }})
  .then(response => {
    console.log({ response });
  })
  .catch(err => {
    console.log('err', err);
  })

Comments are closed.