1

Estoy desarrollando una web page en la cual en uno de sus apartados el ususario debe de registrar un producto (DATOS) y subir una imagen (opcional) referente a este. Al hacer click en el boton de "Guardar" deberia de subir la imagen al servidor, registrar los datos en la Base de Datos MYSQL (Incluyendo el nombre de la imagen) Estoy utilizando node.js, express, mySQL, express-fileupload, materialize, etc.

Ahora bien el problema se presenta al querer hacer estas dos funciones al mismo tiempo, es decir, registrar datos y subir una imagen al servidor. Ya las hago, pero son por separado, y no he podido hacerlas al mismo tiempo.

Como podria realizar esto? Les dejo fragementos del programa:

Codigo de "Routes" (tienda.js)

const express = require('express');
const router = express.Router();

//Guarda un producto
router.post('/add',tiendaController.save);
//Subir una archivo
router.post('/upload',tiendaController.uploadFile);

Codigo "controller" (tiendaController.js)

controller.save = (req, res) => {
    const data = req.body;

    req.getConnection((err, conn) => {
        conn.query('INSERT INTO productos set ?', [data], (err,rows) => {
            if(err)
            {
                //res.json(err);
                console.log(err);
                console.log('ERROR al enviar los datos');
            }
            else
            {
                res.redirect('/');
            }

        });
    })
}

//Subir un archivo
controller.uploadFile = (req,res) => {

    let EDFile = req.files.file;
    //console.log(EDFile.name);
    EDFile.mv(`./files/${EDFile.name}`,err => {
        if(err) {
            return res.status(500).send({ message : err })
        }else
            res.redirect('/');


    });

}

HTML (productos.ejs)

 <!-- Inico del Formulario DATOS -->
              <form action="/add" method="post" class="col s12">
                <div class="row">
                  <input name="id_producto" hidden > </input> <!--Aqui es donde se colocora el ID interno de la BD, para despues manejarlo desde el backend. No hace falta poner ningun valor por que es autoincrement (al momento de enviarlo)-->

                </div>
                <div class="row">
                  <div class="input-field col s5 m5 l5">
                    <input required id="ID-sku" name="id_sku" type="number" data-length="11" />
                    <label for="sku">SKU</label>
                  </div>
                  <div class="input-field col s7 m7 l7">
                    <input required id="ID-name" name="nombre_producto" type="text" length="25" />
                    <label for="name">Nombre</label>
                  </div>
                </div>

                <div class="row ">
                  <div class="input-field col s12">
                    <textarea id="ID-description" required name="descripcion_producto" class="materialize-textarea"></textarea>
                    <label for="description">Descripcion</label>
                  </div>
                  <div class="input-field col s12">
                    <textarea id="ID-notes" name="notas" class="materialize-textarea" length="30"></textarea>
                    <label for="notes">Notas opcionales del producto</label>
                  </div>
                </div>

                  <div class="row">
                    <div class="input-field col l2 offset-l5 ">
                      <button id="ID-btn_enviar" class="btn cyan waves-effect waves-light right" type="submit">Guardar
                        <i class="mdi-content-send right"></i>
                      </button>
                    </div>
                  </div>


              </form> <!-- ///// Fin del Form ///// -->
            </div><!--/Row-->


<!-- Inico del Formulario IMAGEN-->
            <div class="row">
              <form action="/upload" method="POST" enctype="multipart/form-data">
                <div class="file-field input-field">
                    <div class="btn">
                      <span>Imagen</span>
                      <input type="file" name="file" accept="image/png, image/jpeg">
                    </div>
                    <div class="file-path-wrapper">
                      <input class="file-path validate" type="text" placeholder="Sube una imagen">
                    </div>
                  </div>

                <input class="btn orange waves-effect waves-light right" type="submit" id="ID_btn_enviaImagen" value="Subir">
              </form>    
            </div>

Estructura de la tabla donde guardo datos (Recortada)

> id_productoPrimaria int(11)
> nombre_producto varchar(25)
> descripcion_producto  text 
> imagen    varchar(25)

Muchas gracias de antemano! :D

PD: Recorte algunas partes del HTML aqui, para que sea mas facil de leer (Por si me falto cerrar un div)

1 respuesta 1

1

No puedes guardar la imágen sin antes subirla. Primero tienes que subir la imágen y luego guardarla en la base de datos. El input para subir la imágen debería estar en el mismo form donde guardas los datos del producto, no hay necesidad de tener dos requests diferentes. Teniendo esto en cuenta, tu código sería algo así...

controller.save = (req, res) => {

    let EDFile = req.files.file;
    //console.log(EDFile.name);
    EDFile.mv(`./files/${EDFile.name}`,err => {
      if(err) {
        return res.status(500).send({ message : err })
      } else {
        res.redirect('/');
      }
    });

    const data = req.body;
    const productData = {data, imagen: EDFile.name }

    req.getConnection((err, conn) => {
        conn.query('INSERT INTO productos set ?', [productData], (err,rows) => {
            if(err)
            {
                //res.json(err);
                console.log(err);
                console.log('ERROR al enviar los datos');
            }
            else
            {
                res.redirect('/');
            }

        });
    })
}
4
  • Tengo entenido que para poder subir una imagen al servidor debes de tener 'enctype="multipart/form-data"' en el form que contenga el input donde se carga la imagen. Y el enctype de un form de DATOS tiene uno distinto, y no es directamente compatible. Como aplicaria tu solucion? Dejaria el input de la imagen en su respectivo form separado del form de DATOS? De ser asi, deberia de apuntar tambien al route "/save" al igual que el de datos? Commented el 24 oct. 2018 a las 19:53
  • Declara el enctype="multipart/form-data" en el form del producto y mueve tu input tambien a ese form. No hay necesidad de hacerlo en dos formularios diferentes.
    – adavia
    Commented el 24 oct. 2018 a las 20:31
  • Si guarda ambas cosas, la info y la imagen. Pero crashea al intentar terminar. El error es el siguiente: C:\Users\AlanOliver\Desktop\tienda_online\node_modules\mysql\lib\protocol\Parser.js:80 throw err; // Rethrow non-MySQL errors ^ Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client Commented el 25 oct. 2018 a las 4:22
  • Ya lo solucione. La razon por la cual no funcionaba el codigo es por que cuando gurdaba la imagen, inmediatamente despues queria redireccionar a la raiz ('/'). Elimando dicha linea de codigo, hace que funcione perfectamente <3. Igual ya edite la respuesta para que salga como deberia de ser. Por si alguien lo necesita. Commented el 25 oct. 2018 a las 4:35

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.