Multer upload de imagens com nodejs e express

Multer upload de imagens com nodejs e express

Tulio Faria
Tulio Faria29 de novembro de 2017
Hoje vou mostrar uma dica rápida de como podemos fazer upload no NodeJS utilizando o Express. Para isso vamos utilizar o Multer.
A primeira coisa que vamos fazer é o seguinte:

yarn add express ejs multer

Agora, com o Visual Studio Code aberto, vamos criar um arquivo novo index.js e também uma pasta view com um arquivo home.ejs dentro dele, em seguida faremos o seguinte em index.js:

const express = require('express') const app = express() app.set('view-engine', 'ejs') app.get('/', (req, res) => res.render('home')) app.post('/', (req, res) => { console.log(req.body, req.files) res.send('ok') }) app.listen(3000, () => console.log('running...'))

Já dentro de home.ejs vai ter o seguinte:

<h1>Upload</h1> <form method="post" ectype="multipart/form-data"> <input type="file" name="img" /> <button type="submit">Enviar</button> </form>

O 'enctype=”multipart/form-data”' significa que vamos mandar os campos em vários formatos.
Quando enviamos uma foto, por exemplo, vai retornar dois undefined, isso significa que não estamos tratando nem o file e nem o body, por isso precisamos do multer.
O multer é um middleware, por esse motivo conseguimos rodar antes da requisição:

const express = require('express') const app = express() const multer = require('multer') const upload = multer({ dest: 'uploads/' }) app.set('view-engine', 'ejs') app.get('/', (req, res) => res.render('home')) app.post('/', upload.single('img'), (req, res) => { console.log(req.body, req.file) res.send('ok') }) app.listen(3000, () => console.log('running...'))

Reparem que agora temos no body um arquivo vazio e o outro undefined traz informações sobre a imagem juntamente com onde foi salva a imagem.
Nós conseguimos controlar também qual o nome que vamos dar para essa imagem.
Podemos criar um diskStorage, ele é um objeto que tem duas keys, destination que é onde eu vou salvar. Além disso, posso pegar um filename:

const express = require('express') const app = express() const multer = require('multer') const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads/') }, filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.ogirinalname) } }) const upload = multer({ storage })

Nós conseguimos controlar como vamos fazer o upload através do storage. Além disso, podemos criar um memory storage, onde ele vai retornar para nós um buffer dentro do file. É aconselhável utilizar ele exatamente onde você precisa, nunca coloque esse middleware como global.
Confira o video:
FKnDvu_eODY
Assistir vídeo
Curta o DevPleno no Facebook, se inscreva no canal no YouTube e cadastre seu e-mail para não perder as atualizações. Abraço!
Tulio Faria
Autor
Tulio Faria29 de novembro de 2017

Últimas do Blog