0

En la parte del CRUD en mi proyecto, a la hora de actualizar una imagen en un formulario no puedo hacerlo, Por ejemplo aqui le estoy pasando mis valores que deseo actualizar que son el texto, la descripcion y la imagen(path) . Ahora en mi formulario usando handlebars con value, llamo el title y el description , con ellos dos todos bien, pero no se en el input file que poner para que me pueda actualizar la imagen , espero que me puedan ayudar.

router.get('/admin/edit/:id',async(req,res)=>{
    const articleEdit = await Article.findById(req.params.id);
    res.render('admin/edit-article', {articleEdit});
});

router.put('/admin/edit-article/:id',async(req,res)=>{
    const {title,description,path} = req.body;
    await Article.findByIdAndUpdate(req.params.id, {title,description,path});
    res.redirect('/admin/all-article');
});

Ahora en mi formalurio editar,llamo mis valores con value usando handlebars (title,description, path)

<div class="articles" id="edit-articles">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h4 class="text-center text-white">Edita tu articulo para el blog</h4>
                    </div>
                    <div class="card-body">
                        <form action="/admin/edit-article/{{articleEdit._id}}?_method=PUT" method="POST" enctype="multipart/form-data">
                            <div class="form-group">
                                <input type="text" name="title" class="form-control"  placeholder="Titulo" value="{{articleEdit.title}}">
                            </div>
                            <div class="form-group">
                                <textarea name="description" class="form-control" id="" placeholder="Descripcion"
                                    cols="30" rows="10">{{articleEdit.description}}</textarea>
                            </div>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" name="image" id="customFileLang" lang="es">
                                <label class="custom-file-label" for="customFileLang" value="{{articleEdit.path}}"></label>
                            </div>
                            <div class="form-group mt-3">
                                <button type="submit" class="btn-block">Editar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Ahora todo bien con el los valores de title y description, ellos si me actualizan, pero no se que codigo poner en el input [file] para que este actualize.

Actualización

Pongo el código de multer:

const storage = multer.diskStorage({
    destination: path.join(__dirname, 'public/img/uploads'), 
    filename: (req,file,callback,filename)=>{
        callback(null,uuid() + path.extname(file.originalname));
    }
});
app.use(multer({
    storage: storage
}).single('image'));

SI lo estoy usando como middleware en mi archivo principal index.js, el problema es que no logro llevarlo a mi archivo donde estan las rutas, la carpeta routes y ella esta mi archivo que contiene el codigo del metodo put.

Ya he cambiado el req.body por el req.file

router.put('/admin/edit-article/:id',?????,async(req,res)=>{
    const {title,description} = req.body;
    const {path} = req.file;
    await Article.findByIdAndUpdate(req.params.id, {title,description,path});
    res.redirect('/admin/all-article');
});
1
  • En ese caso, ya que usas multer, lo que necesitas es obtener el campo path desde req.file, no desde req.body. Asegúrate que estés usando multer como middleware, ya que no lo veo en tus rutas.
    – gugadev
    Commented el 13 may. 2019 a las 20:14

1 respuesta 1

0

Estás enviando dos grupos diferentes de datos. Por un lado, estás enviando datos simples y por otro, binarios, como son las imágenes, documentos, y cualquier archivo que se cargue.

Para poder capturar correctamente los datos binarios que envías, puedes usar un middleware de Express bastante popular llamado multer.

Multer

Para usar multer, solo basta con crear un nuevo objeto, pasándole como parámetro, un objeto con las configuraciones de almacenamiento que se desea. Una de estas, es destination, la cual debe ser la ruta del directorio en donde deseas guardar las imágenes y filename, que especifica el formato y nombre con el que se guardarán las imágenes (por defecto es un hash sin extensión).

const POST_COVERS_PATH = '/var/posts/covers'

export const upload = multer({
  storage: multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, POST_COVERS_PATH)
    },
    filename: function (req, file, cb) {
      const { fieldname, originalname } = file
      cb(null, `${fieldname}-${Date.now()}.${path.exname(originalname)}`)
    }
  })
})

Lo segundo será usar el objeto multer como middleware del route en donde se van a recibir archivos:

router.put('/admin/edit-article/:id', upload.single('path'), async (req, res) => {
    const { id } = req.params
    const { title, description } = req.body
    const { path } = req.file // obtenemos el path del archivo subido por multer
    try {
      await Article.findByIdAndUpdate(id, { title, description, path })
      res.redirect('/admin/all-article')
    } catch (e) {
      // manejar el error
    }
})

A partir de ahora, cuando edites un post y edites la imagen, lo que pasará es lo siguiente:

  1. El cliente envía los binarios (imagen) en la petición junto con los datos normales.
  2. Multer intercepta la petición en el servidor, obtiene la imagen del cuerpo de la petición de acuerdo al nombre que has puesto en upload.single('nombre del file'), escribe la imagen en el directorio especificado con el nombre descrito.
  3. Le pasa el objeto file que se ha guardado al route añadiéndolo en req.file.

De este modo, cuando se ejecuta el route ya se ha guardado la imagen y tienes acceso a campos como path que es la ruta completa del archivo en el directorio, entre otras.

0

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.