TypeScript: Upload de imagens com Node.js


TypeScript: Upload de imagens com Node.js

Upload de arquivos

Veja nesse artigo como criar um upload de imagem em um projeto configurado com TypeScript e Node.js. Para que possamos pular 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 contem com 3 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 a cima 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.

Passando rapidamente pelo código a cima nos 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:

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 OK, você irá receber ver a mensagem Hello World. Podemos ver esse retorno na imagem abaixo.

Retorno de rota criada com express.js

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:

Vamos entender o código a cima:

  • 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.

Passando pelo código a cima nos temos:

  • 03: Estou importando o arquivo upload.ts
  • 11 a 16: Estou adicionando um middler na rota POST.

Agora para testar o upload, crie um arquivo chamando index.html e atualize ele com o código abaixo.

A cima 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. Nós iremos precisamos configurar para que toda vez que o comando npm start for executado, ele copie esse arquivo para pasta dist. Para isso, iremos precisar baixar um pacote chamado copyfile.Execute o seguinte comando no seu terminal para baixar esse pacote:

npm install copyfiles --save-dev

Agora utilizar ele no projeto, nos precisamos atualizar o nosso arquivo package.json com o seguinte trecho de código abaixo:

"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.

Diretório para upload de imagens

Testando o código

Para testar o nosso código desenvolvido nesse artigo, execute o comando npm start e abra o endereço http://localhost:3000 no seu navegador. Podemos ver o resultado dessa implementação na imagem abaixo:

Upload de imagem

Com isso finalizamos o nosso passo a passo para o upload, espero que tenham gostado e até um próximo artigo.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard
OutpostInfernoNegro

Outpost 2: Inferno Negro

O ano é 1945, 2ª Guerra Mundial, e um cientista alemão de nome Klausener está trabalhando em uma tecnologia nova e assustadora que tem o poder de criar um ex…