2

Hola buenas estoy subiendo un fichero a nodejs con el modulo formidable y todo va bien , el fichero se guarda en el directorio que he indicado y tal, pero el response que recibo en la pagina me dice que no se ha encontrado ningun fichero para subir pero si que se sube, a continuacion dejo el codigo:

Funcion de nodejs que sube el fichero

router.post('/uploadImage', (request, response) => {
    const form = new formidable.IncomingForm()
    const address = path.dirname(__filename).split('/')
    address.pop()

    form.uploadDir = `BACKEND/imagenes/`; //path donde guardaras la imagines
    form.keepExtensions = true; //mantener las extensiones
    form.maxFieldsSize = 10 * 1024 * 1024; //10MB
    form.multiples = true; //multiples archivos

    form.parse(request, (err, fields, files) => {
        if (err) {
            response.json({
                message: 'error al subir la imagen',
                data: []
            })
        }

        const { upload } = files //Hacemos Destructuring, por lo que equivale a 'const upload = files.upload'
        let data

        if (upload) { //Si existe archivo subido o no
            let filesPath

            if (Array.isArray(upload)) { //Si se han subido mas de un archivo, es decir, si es un Array de archivos
                filesPath = upload.map(file => file.path)
            } else {
                filesPath = upload.path
            }

            data = {
                message: 'imagen subida correctamente !!',
                data: filesPath, //Devolvemos una o la lista de rutas de los archivos
                numImagenes: upload.length //Devolvemos la cantidad de archivos
            }
        } else {
            data = {
                message: 'No hay ninguna imagen seleccionada para subir .. ',
                data: [],
                numImagenes: 0
            }
        }

        response.json(data)
    })
})

Formulario de prueba Angular

  <div class="pruebaSubirArchivo"  style="border: solid">
    <form #formImage="ngForm" action="" enctype="multipart/form-data"  method="POST" ngForm>


      <div>
        <input  type="file" placeholder="imagencita"  (change)="onFileSelected($event)"
        name="imagencita">
      </div>


      <div>
        <button mat-raised-button color="primary" > Enviar Imagen</button>
      </div>

    </form>
  </div>

Funcion Typescript de frontend que sube imagen

 onFileSelected(event) {
    this.selectedFile = <File>event.target.files[0];
    //console.log(this.selectedFile);

    //this.empleado_nuevo.imagen_perfil = this.selectedFile.name;
    const fd = new FormData();
    let url = 'http://localhost:3000/uploadImage';

    fd.append('image', this.selectedFile, this.selectedFile.name);
    this.http.post(url, fd).subscribe(
      res => {
        console.log(res);
      });

    //console.log(this.empleado_nuevo.imagen_perfil);
  }

Console del navegador (Chrome)

    {message: "No hay ninguna imagen seleccionada para subir .. ", data: Array(0), numImagenes: 0}
data: []
message: "No hay ninguna imagen seleccionada para subir .. "
numImagenes: 0
__proto__: Object

Reitero que funciona solo que no recibo el response adecuado en el explorado

3
  • Mira que te devuelve el files proque por alguna razón al asignarselo a la constatnte upload este te da false. el 17 dic. 2018 a las 10:52
  • cierto he hecho un console.log y me dice undefined pero en cambio funciona la subida
    – jose angel
    el 17 dic. 2018 a las 10:56
  • Eso es que la subida lo hace antes de entrar aquí el 17 dic. 2018 a las 11:31

1 respuesta 1

2

Respuesta Inicial (Errónea)

Estás poniendo que tu formulario debe ser procesado como múltiple, es decir que puede recibir muchos archivos

     form.multiples = true; //multiples archivos

Según la documentación:

If this option is enabled, when you call form.parse, the files argument will contain arrays of files for inputs which submit multiple files using the HTML5 multiple attribute.

Esto significa que files no es un objeto sino un array de objetos de tipo file y por añadidura

  const {upload} = files;

Es la destructuración de un array, que no tiene propiedad upload.

Respuesta Corregida

Probándolo en mi local, efectivamente como escribió el OP los archivos están dentro de una propiedad. Si esta propiedad fuese upload entonces

  const {upload} = files;

Sería correcto y puede ser un objeto de tipo File o un array de éstos.

introducir la descripción de la imagen aquí

Sin embargo el nombre de la propiedad upload no es fijo. Está determinado por el nombre del input. De manera que si el OP puso:

 <input type="file" name="imagencita">

Los archivos están en files.imagencita

introducir la descripción de la imagen aquí

Y por lo mismo, al hacer la comprobación

 if (upload) {
    ...
 } else {
    // no hay archivos para subir
 }

Efectivamente no existe la propiedad upload.

Haciendo el flujo completo para este caso:

Como sabemos que el campo se llama imagencita, la ruta quedaría más o menos así:

router.post('/uploadImage', (req, res) => {
    const form = new formidable.IncomingForm();
    /* configuracion de form */

    form.uploadDir = path.resolve(`${__dirname}/../imagenes/`); //path donde guardaras la img
    form.keepExtensions = true; //mantener las extensiones
    form.maxFieldsSize = 10 * 1024 * 1024; //10MB
    form.multiples = true; //multiples archivos

    form.parse(req, (err, fields, files) => {
        let data, filesPath, numImagenes;
        if (err) {
            data = {
                message: err.message
            };
        } else if (!files || !files.imagencita) {
            data = {
                message: 'No hay ninguna imagen seleccionada para subir .. ',
                data: [],
                numImagenes: 0
            };
        } else {
            const {imagencita} = files;

            if (Array.isArray(imagencita)) {
                //Si se han subido mas de un archivo, es decir, si es un Array de archivos
                numImagenes = imagencita.length;
                filesPath = imagencita.map(file => file.path);
            } else {
                numImagenes = 1;
                filesPath = imagencita.path;
            }

            data = {
                message: 'imagen subida correctamente !!',
                data: filesPath, //Devolvemos una o la lista de rutas de los archivos
                numImagenes //Devolvemos la cantidad de archivos
            };
        }

        res.json(data);
    });
});

Si te fijas, ocupé un planteamiento "fail early" para evitar anidar ifs:

  1. Si hay error, la respuesta es el mensaje de error
  2. Si no hay error pero no hay files o files no tiene la propiedad imagencita la respuesta es que no hay archivos subidos
  3. Pasadas las dos anteriores, significa que sí hay archivos
6
  • De acuerdo, tengo una duda al respecto, como se entonces si hubo un error en la subida ? ya que no tendria algo como if(error){tal cosa}
    – jose angel
    el 17 dic. 2018 a las 13:34
  • Amigo @joseangel, una pregunta cada vez. Si esta respuesta te resolvió el problema que planteas, deberías considerar el aceptarla (símbolo del check, a la izquierda). Si tienes nuevas dudas, sientete libre de publicar otra pregunta :-)
    – Trauma
    el 17 dic. 2018 a las 15:29
  • estaba esperando que me respondiese a mi pregunta para asegurarme antes de validar algo en lo que no creo, pero muchas gracias
    – jose angel
    el 17 dic. 2018 a las 15:34
  • Hice la prueba en mi local y tienes razón, los archivos están dentro de una propiedad, pero esa propiedad se llama como tu input, "imagencita"
    – ffflabs
    el 18 dic. 2018 a las 16:02
  • @amenadiel como podria , a partir de esto, modificar los nombres de subidas de los archivos a i gusto? cual es la propiedad
    – jose angel
    el 19 dic. 2018 a las 21:44

Tu Respuesta

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

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