Nest JS — Как получить изображение из dist в браузере?

Question

[IFramex]

Изображения сохраняются в dist/uploads/image


main.ts

import { AppModule } from './modules/app.module';
import { NestFactory } from '@nestjs/core';
import { ValidateInputPipe } from './validators/validate.pipe';

async function startServer() {
  const PORT = process.env.PORT || 5000
  const app = await NestFactory.create(AppModule);
  app.setGlobalPrefix("/api")
  app.useGlobalPipes(new ValidateInputPipe())
  app.enableCors()
  
  await app.listen(PORT);
}
startServer();

file.service.ts

import { HttpException, HttpStatus, Injectable } from "@nestjs/common";
import * as path from "path"
import * as fs from "fs"
import * as uuid from "uuid"

export enum FileType {
    IMAGE = "image",
    VIDEO = "video",
    AUDIO = "audio",
    PDF = "pdf"
}

@Injectable()
export class FileService {
    constructor() {}

    createFile(type: FileType, file): string {
        try {
            const fileExtension = file.originalname.split(".").pop()
            const fileName = uuid.v4() + "." + fileExtension

            const filePath = path.resolve(__dirname, "..", "uploads", type)
            if (!fs.existsSync(filePath)) fs.mkdirSync(filePath, {recursive: true})
            fs.writeFileSync(path.resolve(filePath, fileName), file.buffer)

            return type + "/" + fileName
        } catch (error) {
            throw new HttpException(error.message, HttpStatus.INTERNAL_SERVER_ERROR)
        }
    }
    removeFile(filename: string) {}
}

file.module.ts

import { FileService } from './../services/file.service';
import { Module } from "@nestjs/common";

@Module({
    providers: [FileService]
})
export class FileModule {}

courses.controller.ts

import { CoursesService } from './../services/courses.service';
import { Body, Controller, Delete, Get, Post, UploadedFile, UseInterceptors } from "@nestjs/common";
import { FileInterceptor } from '@nestjs/platform-express';

@Controller("/courses")
export class CoursesController {
    constructor(private coursesService: CoursesService) {}

    @Post("/create")
    @UseInterceptors(FileInterceptor("logo"))
    createCourse(@Body() dataCourse: any, @UploadedFile() logo: any) {
        return this.coursesService.create(dataCourse, logo)
    }
}

Answer 1

[Виталий]

читал тут? https://docs.nestjs.com/techniques/file-upload

Comments

[IFramex]

по больше части здесь расписываются именно способы загрузки файлов, а примеры, как правильно отправлять ссылки изображения на клиент в отдельном запросе не показаны

[Виталий]

IFramex, а у тебя прям все показано ) скрин и старт сервера....
сразу скажу, включая телепата, мне кажется, что ты добавил папку в дист и считаешь, что у тебя от этого появится контроллер, который отдает файлы. Если это так, то ты сильно не прав.
И вообще в дист включать что-то руками нельзя. Заведи для этого отдельно папку.

[IFramex]

Виталий, добавил несколько отрывков кода и то, каким образом сохраняются изображения. В dist я ничего не трогал

[Виталий]

IFramex, ну ссмотри, у тебя 404 на GET /uploads/...jpg
где у тебя контроллер, который за это отвечает то?

[IFramex]

Виталий, я не совсем понимаю, каким образом этот контроллер нужно сделать и как находить изображения. Я также пробовал в main.ts прописывать это:

app.use('/uploads', express.static('../dist/uploads/image'));

но там все равно изображение не находит.

Также я сделал отдельный контроллер для изображений и прописал туда это:

async getFile(filename: string) {
        let img = fs.readFileSync(path.resolve(__dirname, "..", "uploads", "image", filename))
        return img
    }

но вместо желаемого изображения оно так отдается:

[Виталий]

потому что оно читает файл в буфер а дальше при серриализации в жсон ты видишь массив, делай нормальный контроллер отдачи не выдумывай

[Виталий]

https://www.techiediaries.com/nestjs-upload-serve-...

[IFramex]

Виталий, благодарю за статью, проблема устранена !!!

Answer 2

[IFramex]

Я устранил эту проблему, изменив file.controller.ts и поменяв расположение папки с изображениями

import { FileService } from './../services/file.service';
import { Controller, Get, Param, Res } from "@nestjs/common";

@Controller("/files")
export class FilesController {
    constructor (private fileService: FileService) {}

    @Get("/:filename")
    async getFile(@Param("filename") filename: string, @Res() res: any) {
        res.sendFile(filename, { root: 'static/image'});
    }
}