Multer upload de imagens com nodejs e express

Escrito por

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:

1yarn 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:

1const express = require("express")
2const app = express()
3app.set("view-engine", "ejs")
4app.get("/", (req, res) => res.render("home"))
5app.post("/", (req, res) => {
6 console.log(req.body, req.files)
7 res.send("ok")
8})
9app.listen(3000, () => console.log("running..."))

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

1<h1>Upload</h1>
2
3<form method="post" ectype="multipart/form-data">
4 <input type="file" name="img" />
5 <button type="submit">Enviar</button>
6</form>

O ‘ectype=”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:

1const express = require("express")
2const app = express()
3const multer = require("multer")
4const upload = multer({ dest: "uploads/" })
5app.set("view-engine", "ejs")
6app.get("/", (req, res) => res.render("home"))
7app.post("/", upload.single("img"), (req, res) => {
8 console.log(req.body, req.file)
9 res.send("ok")
10})
11app.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:

1const express = require("express")
2const app = express()
3const multer = require("multer")
4const storage = multer.diskStorage({
5 destination: (req, file, cb) => {
6 cb(null, "uploads/")
7 },
8 filename: (req, file, cb) => {
9 cb(null, Date.now() + "-" + file.ogirinalname)
10 },
11})
12const 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:

Deixe suas dúvidas e sugestões nos comentários. 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!

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium