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!
