lunes 24 junio 2024

Cómo Subir Imágenes en NestJS

Requisitos Previos

Antes de comenzar, asegúrate de tener lo siguiente:

Node.js instalado en tu máquina.
npm (el gestor de paquetes de Node.js).
Conocimientos básicos de TypeScript y NestJS.

Paso 1: Crear un Proyecto NestJS

Primero, crearemos un nuevo proyecto de NestJS. Abre tu terminal y ejecuta el siguiente comando:

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

Esto creará un nuevo proyecto llamado upload-images-tutorial. Navega dentro del directorio del proyecto:

cd upload-images-tutorial

Paso 2: Instalar Dependencias Necesarias

Para manejar la subida de archivos, usaremos la librería multer, que es un middleware para manejar multipart/form-data, usado para subir archivos. Además, instalaremos @nestjs/platform-express, que incluye la integración de Express con NestJS.

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

Paso 3: Configurar Multer

Vamos a configurar Multer para manejar la subida de archivos. Crearemos un archivo de configuración para Multer.

Crea un archivo llamado multer.config.ts en el directorio 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
  },
};

Paso 4: Crear el Controlador de Subida de Imágenes

Ahora, crearemos un controlador para manejar las peticiones de subida de imágenes.

// 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,
    };
  }
}

Paso 5: Crear el Módulo de Subida de Imágenes

Para organizar mejor nuestro código, crearemos un módulo para manejar la funcionalidad de subida de imágenes.

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

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

Paso 6: Importar el Módulo en la Aplicación Principal

Necesitamos asegurarnos de que nuestro módulo de subida de imágenes esté importado en el módulo principal de la aplicación.

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

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

Paso 7: Crear la Carpeta de Subidas

Crea una carpeta llamada uploads en el directorio raíz de tu proyecto para almacenar los archivos subidos.

mkdir uploads

Paso 8: Probar la API

Levanta el servidor de NestJS:

npm run start

Usa herramientas como Postman o curl para probar la subida de imágenes. Envía una petición POST a http://localhost:3000/upload con un archivo en el campo file.

Paso 9: Configurar Servidor Estático

Para poder acceder a las imágenes subidas desde el navegador, configuraremos NestJS para servir archivos 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();

Conclusión

Hemos cubierto cómo configurar una aplicación NestJS para subir imágenes, incluyendo la configuración de Multer, creación de controladores y módulos, y configuración del servidor para servir archivos estáticos. Con estos pasos, deberías tener una comprensión sólida de cómo manejar la subida de archivos en una aplicación NestJS.

Etiquetas:

nestjs imagenes typescript

Autor:

Jorge García

Fullstack developer