Categorias
iiiiii
subir archivos al backend y exponerlos
Descripcion
subir archivos al systema de archivos de mi servid
Nota1
0. enlace documentacion para subir archivos:https://docs.nestjs.com/techniques/file-upload
1. instalar archivos de definicion. El paquete de subir archivos ya es de nest. solo este es de definicion :
$ npm i -D @types/multer
3. creamos una funcion llamada fileFilter la cual debe conter los mismos parametros del interceptor y esta funcion se usa para evaluar el archivo antes de subirlo
4. creamos una funcoi llamada fileName para cambiarle el nombre al archivo
5. creaos un controlador en el metodo uploadProductImage para subir lso archiso usando un interceptor " @UseInterceptors( FileInterceptor"
6. creamos un servicio(FilesService) para ver si existe el archivo en el sistema de archivos
6. para exponerlo se crea una funcion findProductImage en el controlador de tipo get
NOTA:
1.solo funciona para nest usando express.
2.TAMBIEN SE VA EXPONER EL ARCHIVO PARA SER USADO
3.para mostrar imagenes se va usar decorador @Res() para que la respuesta no la maneje nest si no t?
Modulo
asa
Servicio
import { existsSync } from 'fs';
import { join } from 'path';
import { Injectable, BadRequestException } from '@nestjs/common';
@Injectable()
export class FilesService {
getStaticProductImage( imageName: string ) {
const path = join( __dirname, '../../static/products', imageName );
if ( !existsSync(path) )
throw new BadRequestException(`No product found with image ${ imageName }`);
return path;
}
}
Controlador
import { Controller, Get, Post, Param, UploadedFile, UseInterceptors, BadRequestException, Res } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { FileInterceptor } from '@nestjs/platform-express';
import { Response } from 'express';
import { diskStorage } from 'multer';
import { FilesService } from './files.service';
import { fileFilter, fileNamer } from './helpers';
@Controller('files')
export class FilesController {
constructor(
private readonly filesService: FilesService,
private readonly configService: ConfigService,
) {}
@Get('product/:imageName')
findProductImage(
@Res() res: Response, //<- aqui vamos a manejar la respuesta nosotros mismos
@Param('imageName') imageName: string
) {
const path = this.filesService.getStaticProductImage( imageName );
res.sendFile( path );
}
@Post('product')
@UseInterceptors( FileInterceptor('file', { //File es elnombre de la propiedad que se le envia desde la peticion
fileFilter: fileFilter,
// limits: { fileSize: 1000 }
storage: diskStorage({
destination: './static/products', //<- aqui se pone la carpeta donde quiero guardarlo
filename: fileNamer
})
}) )
uploadProductImage( //<------------Esta es la funcion para poder subir archivos
@UploadedFile() file: Express.Multer.File,
){
if ( !file ) {
throw new BadRequestException('Make sure that the file is an image');
}
// const secureUrl = `${ file.filename }`;
const secureUrl = `${ this.configService.get('HOST_API') }/files/product/${ file.filename }`;
return { secureUrl };
}
}
Entity
//********************* PARA CRAR ARCHIVO******************************************/
//creamos una funcoin para ser llamada desde el interceptor
export const fileFilter = ( req: Express.Request, file: Express.Multer.File, callback: Function ) => {
// console.log({ file })
if ( !file ) return callback( new Error('File is empty'), false );
const fileExptension = file.mimetype.split('/')[1];
const validExtensions = ['jpg','jpeg','png','gif'];
if ( validExtensions.includes( fileExptension ) ) {
return callback( null, true )
}
//Se regresa un true cuando el archivo pasa las validacion es y un true para poder dejarlo pasar
callback(null, false );
}
/**********************************para renombrar archivo****************************/
import { v4 as uuid } from 'uuid'
export const fileNamer = ( req: Express.Request, file: Express.Multer.File, callback: Function ) => {
// console.log({ file })
if ( !file ) return callback( new Error('File is empty'), false );
const fileExtension = file.mimetype.split('/')[1];
const fileName = `${ uuid() }.${ fileExtension }`;
callback(null, fileName ); //<- aqui se regresa el nombre del archivo
}
App.module
as
Main
s
Vista
as