TypeScript: Upload de imagens com Node.js
Neste artigo, o autor mostra como criar um upload de imagem em um projeto configurado com TypeScript e Node.js.
Veja nesse artigo como criar um upload de imagem em um projeto configurado com TypeScript e Node.js. Para pularmos a etapa de configuração de um novo projeto TypeScript, eu subi no meu GitHub um com uma configuração básica no seguinte link: TypeScript-Standard.
Esse projeto contém três arquivos: index.ts com um console.log(), package.json: com a configuração inicial de um projeto e o tsconfig.json, arquivo de configuração do TypeScript.
Baixando os pacotes
Com o projeto clonado no seu computador, execute o seguinte comando para baixar os pacotes necessários para esse artigo:
npm install express multer --save
A execução do comando acima irá baixar o express para gerenciar as rotas e o multer para auxiliar no upload dos nossos arquivos.
Agora você precisa configurar o TypeScript. Para isso, execute o seguinte comando para baixar os seus @types:
npm install typescript @types/express @types/multer --save-dev
Criando a primeira Rota
Abra o seu arquivo index.ts e atualize ele com o código abaixo.
import * as express from 'express'
import * as multer from 'multer'
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
})
app.listen(3000, function () {
console.log('listening on port 3000!');
});
Passando rapidamente pelo código acima, nós temos:
- Importação dos nossos modules multer e express.
- Criação de uma rota.
- Configuração da porta que o projeto irá escutar.
- Testando a Rota
Para testar a rota, atualize o seu arquivo package.json com o código abaixo:
"name": "tsnode-standard",
"version": "1.0.0",
"description": "",
"scripts": {
"prestart": "tsc",
"start": "node dist/index.js"
},
Agora execute npm start para criar o diretório dist, assim que ele for criado irá executar o comando node dist/index.js e rodar o projeto na porta 3000. Abra o endereço http://localhost:3000, caso tudo esteja OK, você verá a mensagem Hello World. Podemos ver esse retorno na imagem abaixo.
Criando rota de Upload
O seu próximo passo será configurar o multer. Para isso, crie um novo arquivo na raiz do seu projeto chamado upload.ts na raiz do seu projeto e atualize ele com o código abaixo:
import * as multer from "multer";
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, "uploads/");
},
filename: function(req, file, cb) {
cb(null, file.originalname);
}
});
const uploads = multer({ storage: storage });
export default uploads ;
Vamos entender o código acima:
- 01: Estamos importando o multer, ele é uma biblioteca que nos permite trabalhar com multipart/form-data.
- 03 a 10: Estamos passando qual será o nosso filename e o diretório que iremos enviar os nossos arquivos.
Agora você precisa criar uma rota para o upload. Para isso, atualize o seu arquivo index.ts com o código abaixo.
import * as express from 'express'
import uploads from './upload'
const app = express();
app.get('/',(req,res) => {
res.send('Hello World');
})
app.post('/', uploads.single('avatar'), (req, res) => {
try {
res.send('Arquivo enviado com sucesso: ' + req.file.filename);
} catch (error) {
console.log(error);
}
})
app.listen(3000, () => console.log('listening on port 3000!'))
Passando pelo código acima, nós temos:
- 03: Importação do arquivo upload.ts
- 11 a 16: Adição de um middler na rota POST.
Agora, para testar o upload, crie um arquivo chamando index.html e atualize ele com o código abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form class="uploadForm" action="http://localhost:3000/" method="post" enctype="multipart/form-data">
<label class="control-label">Select File</label>
<input name="avatar" id="input-1" type="file" class="file">
<input type="submit" value="submit" />
</form>
</body>
</html>
Acima foi criada uma estrutura html com um formulário e um campo file para o upload. Geralmente eu utilizo o postman para esses testes HTTP nos meus artigos, mas nesse eu irei mostrar como retornar ele na rota Get.
Como iremos adicionar o arquivo .html no retorno da nossa rota Get, e lembrando que o nosso arquivo é transpilado para pasta dist. Precisaremos configurar para que toda vez que o comando npm start for executado, ele copie esse arquivo para pasta dist. Para isso, vamos precisar baixar um pacote chamado copyfile.
Execute o seguinte comando no seu terminal para baixar esse pacote:
npm install copyfiles --save-dev
Agora, para utilizar ele no projeto, precisaremos atualizar o nosso arquivo package.json com o seguinte trecho de código:
"scripts": {
"prestart": "tsc && copyfiles *.html dist/",
"start": "node dist/index.js"
}
Note que o prestart está concatenando o tsc com um novo comando para executar o pacote copyfiles.
Agora atualize novamente a sua rota GET com o código abaixo:
app.get('/',(req,res) => {
res.sendFile('index.html', { root: __dirname });
})
Em seguida, crie um novo diretório chamado uploads na raiz do seu projeto.
Testando o código
Para testar o código desenvolvido nesse artigo, execute o comando npm start e abra o endereço http://localhost:3000 em seu navegador. Podemos ver o resultado dessa implementação na imagem abaixo:
Com isso finalizamos o nosso passo a passo para o upload, espero que tenham gostado e até um próximo artigo!
Microsoft (MVP), atualmente trabalha como Arquiteto de Software para TV Bandeirantes. Nesses últimos anos, focou nas tecnologias criadas pela Microsoft, mas sempre esteve antenado para as novas tecnologias que estão surgindo no mercado. Em um breve resumo, é uma pessoa apaixonada pelo que faz, tem a sua profissão como hobby.
