quarta-feira 18 setembro 2024

Como Subir Imagens no NestJS

Requisitos Pré-requisitos

Antes de começar, certifique-se de ter o seguinte:

Node.js instalado em sua máquina.
npm (o gerenciador de pacotes do Node.js).
Conhecimentos básicos de TypeScript e NestJS.

Passo 1: Criar um Projeto NestJS

Primeiro, vamos criar um novo projeto NestJS. Abra o terminal e execute o seguinte comando:

npm i -g @nestjs/cli
nest new upload-images-tutorial

Isso criará um novo projeto chamado upload-images-tutorial. Navegue para dentro do diretório do projeto:

cd upload-images-tutorial

Passo 2: Instalar Dependências Necessárias

Para gerenciar o upload de arquivos, usaremos a biblioteca multer, que é um middleware para manipular multipart/form-data, usado para upload de arquivos. Além disso, instalaremos @nestjs/platform-express, que inclui a integração do Express com o NestJS.

npm install --save @nestjs/platform-express multer

Passo 3: Configurar Multer

Vamos configurar o Multer para gerenciar o upload de arquivos. Criaremos um arquivo de configuração para o Multer.

Crie um arquivo chamado multer.config.ts no diretório src:

// src/multer.config.ts
import { MulterOptions } from '@nestjs/platform-express/multer/interfaces/multer-options.interface';
import { diskStorage } from 'multer';
import { extname } from 'path';

export const multerConfig: MulterOptions = {
  storage: diskStorage({
    destination: './uploads',
    filename: (req, file, cb) => {
      const randomName = Array(32)
        .fill(null)
        .map(() => Math.round(Math.random() * 16).toString(16))
        .join('');
      return cb(null, `${randomName}${extname(file.originalname)}`);
    },
  }),
  limits: {
    fileSize: 1024 * 1024 * 5, // 5 MB
  },
};

Passo 4: Criar o Controlador de Upload de Imagens

Agora, criaremos um controlador para gerenciar as requisições de upload de imagens.

// src/upload/upload.controller.ts
import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { multerConfig } from '../multer.config';

@Controller('upload')
export class UploadController {
  @Post()
  @UseInterceptors(FileInterceptor('file', multerConfig))
  uploadFile(@UploadedFile() file) {
    return {
      originalname: file.originalname,
      filename: file.filename,
      path: file.path,
    };
  }
}

Passo 5: Criar o Módulo de Upload de Imagens

Para organizar melhor nosso código, criaremos um módulo para gerenciar a funcionalidade de upload de imagens.

// src/upload/upload.module.ts
import { Module } from '@nestjs/common';
import { UploadController } from './upload.controller';

@Module({
  controllers: [UploadController],
})
export class UploadModule {}

Passo 6: Importar o Módulo na Aplicação Principal

Precisamos garantir que nosso módulo de upload de imagens esteja importado no módulo principal da aplicação.

// src/app.module.ts
import { Module } from '@nestjs/common';
import { UploadModule } from './upload/upload.module';

@Module({
  imports: [UploadModule],
})
export class AppModule {}

Passo 7: Criar a Pasta de Uploads

Crie uma pasta chamada uploads no diretório raiz do seu projeto para armazenar os arquivos enviados.

mkdir uploads

Passo 8: Testar a API

Levante o servidor NestJS:

npm run start

Use ferramentas como Postman ou curl para testar o upload de imagens. Envie uma requisição POST para http://localhost:3000/upload com um arquivo no campo file.

Passo 9: Configurar Servidor Estático

Para poder acessar as imagens enviadas a partir do navegador, configuraremos o NestJS para servir arquivos estáticos.

// src/main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets(join(__dirname, '..', 'uploads'), {
    prefix: '/uploads/',
  });
  await app.listen(3000);
}
bootstrap();

Conclusão

Cobrimos como configurar uma aplicação NestJS para fazer upload de imagens, incluindo a configuração do Multer, criação de controladores e módulos, e configuração do servidor para servir arquivos estáticos. Com esses passos, você deve ter uma compreensão sólida de como gerenciar o upload de arquivos em uma aplicação NestJS.

Tags:

nestjs javascript nodejs

Criado por:

Jorge García

Fullstack developer