Multer upload de imagens com nodejs e express

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:

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!