1

Tengo un formulario en mi front en una aplicación hecha con angular que al hacer un post para enviarlo a mi node recibo el objeto con todos los campos, pero el campo de imágenes lo recibe como un array de objetos vacío, y no consigo mostrar las imágenes para posteriormente con la librería filesystem (fs) almacenar esas imágenes que recibe el back y guardarlas en una carpeta, lo que me interesa ahora entender es por qué no se está recibiendo bien el arreglo de imágenes, este es por ejemplo el objeto que envío desde el front:

introducir la descripción de la imagen aquí

y este es el console.log en mi back que devuelve:

{
  nombre: 'Producto Nombre',
  categoria: 'cat1',
  subcategoria: 'subcat2',
  precio: 123,
  imagenes: [ {}, {}, {}, {} ],
  descripcion: 'Producto descripción'
}

He estado leyendo y parece que necesito para procesar las imagenes un middleware con un multer, y además asegurarme de pasar en las cabeceras el content-type: multipart/form-data, también en la etiqueta form, incluir enctype="multipart/form-data" Pero nada de eso me está solucionando el problema. En mi front yo estoy enviando el formulario de esta forma al back

try {
        this.producto.nombre = this.form.value.nombre_produ;
        this.producto.categoria = this.form.value.categoria;
        this.producto.subcategoria = this.form.value.subcategoria;
        this.producto.precio = this.form.value.precio_produ;
        this.producto.descripcion = this.form.value.descri_produ;
        this.producto.imagenes = this.filesToUpload;
        console.log(this.producto);
        // const headers = { 'Content-Type': 'multipart/form-data' };
        // const options = { headers: headers };
        this.http.post('http://localhost:7777/productos', this.producto).subscribe((result) => {
          console.log(result)
        });
      } catch (e) {
        

Y el back lo está recibiendo tal que así

app.post("/productos", (req: any, res: any) => {
  const producto = req.body;
  console.log(producto)
  return res.status(200).json({ mensaje: "Producto guardado correctamente" });
});

Se os ocurre alguna solución? Muchas gracias de antemano.

2
  • multer es paquete desarrollado por ExpressJS para ayudar con la subida de archivos. Para saber como utilizarlo, recomiendo visitar su repositorio. Existen otros paquetes, pero no tan populares.
    – Marcos
    el 24 mar. a las 11:13
  • @Marcos la cosa es que ahora mismo solo quiero sacar por la consola de node el objeto que me llevo del front del formulario, consigo sacar todos los datos, pero no sacar el array de tipo File, que como ves, devuelve un array con objetos vacíos. Me gustaría saber como puedo obtener ese array en el backend y ya de ahí con multer o filesystem seguir continuando. Gracias por la respuesta el 24 mar. a las 13:28

1 respuesta 1

1

Por el lado de Nodejs, una opción es utilizar multer. Para ello necesitas:

  • Instalarlo.

    $ npm install --save multer
    
  • Instanciarlo en tu servidor nodejs.

    const express = require('express')
    const multer  = require('multer')
    const upload = multer({ dest: 'uploads/' }) // Indicar path al directorio
    
    const app = express();
    
  • Agregar el middleware en la ruta correspondiente.

    app.post("/productos", upload.array('imagenes'), (req: any, res: any) => {
    
      // req.files es un arrelgo de "imagenes"
      // req.body contiene el resto de los campos
    
      const producto = req.body;
      console.log(producto)
      console.log(req.files)
    
      return res.status(200).json({ mensaje: "Producto guardado correctamente"});
    });
    

Por el lado de Angular, para enviar los datos es recomendable crear un FormData. Ejemplo:

let fd = new FormData();
fd.append("nombre", this.form.value.nombre_produ);
// resto de campos...

// Agregamos el arreglo de imagenes
this.filesToUpload.forEach(f => fd.append("imagenes", f));

// Enviamos el FormData
this.http.post('http://localhost:7777/productos', fd)
  .subscribe(result => console.log(result));
2
  • no me estaba sirviendo lo que comentas pero ahora parece que sí lo consigo hacer gracias a este enlace blog.logrocket.com/multer-nodejs-express-upload-file e información tuya. Un pequeño apunte, si en el formdata llamas al formdata al append imagenes[], en el multer se tiene que llamar igual, sino da un error 500 de servidor. Muchas gracias por tu tiempo ^^ el 24 mar. a las 15:09
  • @JuanJesúsSedanoCalderón actualice mi respuesta. A parte del error en el imagenes, ¿que es lo que tuviste que hacer que no esta en mi respuesta? Tené en cuenta que podes responder a tu propia pregunta.
    – Marcos
    el 24 mar. a las 17:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.