NestJS – یک نقطه پایانی برای آپلود چندین فایل ایجاد کنید

Summarize this content to 400 words in Persian Lang

اطلاعات عمومی

هدف

1 نقطه پایانی برای API آپلود چند فایل ایجاد کنید

یادداشت های کلاس درس

خلاصه

کد پروژه قبلی را دریافت کنید
API را اجرا کنید
ایجاد و پیکربندی 1 نقطه پایانی برای دریافت چندین فایل
ایجاد متد در سرویس برای بازگرداندن اطلاعات فایل

برای دریافت چندین فایل، nestjs رهگیرهای زیر را ارائه می کند:

FilesInterceptor – الف را شناسایی می کند آرایه از فایل هایی با نام فیلد فرم یکسان؛

FileFieldsInterceptor –

AnyFilesInterceptor –

1. کد پروژه قبلی را دریافت کنید

یادداشت کلاس قبلی NestJS است – آپلود 1 فایل که یک پروژه جاوا اسکریپت برای Rest API با استفاده از nestjs و typescript ایجاد کرد.

می توانید از کد خود استفاده کنید، یا فایل فشرده را دانلود کنید یا مخزن github را شبیه سازی کنید.

2. API را اجرا کنید

به یاد داشته باشید که به پوشه پروژه دسترسی داشته باشید!!!

با اجرای دستور، api را در حالت توسعه اجرا کنید npm با گزینه run برای اجرای اسکریپت start:dev.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اجرا باید نتیجه ای مشابه کنسول زیر ایجاد کند.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. ایجاد و پیکربندی 1 نقطه پایانی برای دریافت چندین فایل

یک نقطه پایانی به کنترل کننده src/upload/upload.controller.tsبه روز رسانی واردات بر اساس کد (تفاوت) در زیر.

import {
Controller,
Post,
UploadedFile,
++ UploadedFiles,
UseInterceptors,
} from ‘@nestjs/common’;
–import { FileInterceptor } from ‘@nestjs/platform-express’;
++import { FileInterceptor, FilesInterceptor } from ‘@nestjs/platform-express’;
import {
++ ApiBadRequestResponse,
ApiBody,
ApiConsumes,
ApiOperation,
ApiResponse,
ApiTags,
} from ‘@nestjs/swagger’;
import { UploadService } from ‘./upload.service’;

@Controller(‘upload’)
@ApiTags(‘upload’)
export class UploadController {
constructor(private readonly uploadService: UploadService) {}

@Post(‘exemplo-simples’)
@UseInterceptors(FileInterceptor(‘arquivo’))
@ApiConsumes(‘multipart/form-data’)
@ApiBody({
schema: {
type: ‘object’,
properties: {
arquivo: {
type: ‘string’,
format: ‘binary’,
},
},
},
})
@ApiOperation({ summary: ‘Exemplo de upload de 1 arquivo qualquer’ })
@ApiResponse({ status: 201, description: ‘Arquivo enviado com sucesso.’ })
@ApiResponse({ status: 400, description: ‘Erro no envio do arquivo.’ })
uploadArquivoSimples(@UploadedFile() arq: Express.Multer.File) {
console.log(arq);

return this.uploadService.responderInformacaoArquivo(arq);
}

++ @Post(‘arquivos’)
++ @UseInterceptors(FilesInterceptor(‘arquivos’))
++ @ApiConsumes(‘multipart/form-data’)
++ @ApiBody({
++ schema: {
++ type: ‘object’,
++ properties: {
++ arquivos: {
++ type: ‘array’,
++ items: {
++ type: ‘string’,
++ format: ‘binary’,
++ },
++ },
++ },
++ },
++ })
++ @ApiResponse({
++ status: 201,
++ description: ‘Arquivo(s) enviado(s) com sucesso.’,
++ })
++ @ApiBadRequestResponse({
++ status: 400,
++ description: ‘Erro no envio de arquivos.’,
++ })
++ uploadArquivos(@UploadedFiles() arquivos: Array) {
++ return {
++ estado: ‘ok’,
++ data: {
++ quantidade: arquivos?.length,
++ },
++ };
++ }
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به واردات اضافه شد رهگیر FilesInterceptor و دکوراتور UploadedFiles مسئول رهگیری و استخراج چندین فایل در یک آرایه به نام arquivos روی فرم

o دکوراتور @Post سبز را تنظیم کنید POST و مسیر arquivos انجام دهید نقطه پایانی.در حالی که دکوراتور @UseInterceptors استفاده از را پیکربندی می کند FilesInterceptor برای رهگیری درخواست HTTP(S) به دنبال متغیر arquivos داخل فرم در متن پیام

خطوط بعدی شامل دکوراتورها @Api (ApiConsumes، ApiBody، ApiResponse، ه ApiBadRequestResponse) برای پیکربندی اسناد swagger.

خط بعدی، uploadArquivos(@UploadedFiles() arquivos: Array) روش را مشخص می کند uploadArquivos.این روش به عنوان پارامتر متغیر را دارد arquivos چه کسی الف را دریافت خواهد کرد آرایه حاوی مواردی که هر کدام با آنها تایپ شده است Express.Multer.File.پارامتر arquivos نیز تزئین شده است UploadedFiles که وظیفه استخراج آرایه فایل های پیام HTTP

هنگام ذخیره، api دوباره راه اندازی می شود و ترمینالی که در آن اجرا می شود باید مانند کنسول زیر باشد.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای آزمایش، از اسناد API با دسترسی به http://localhost:3000/docs/ استفاده کنیدروی دکمه کلیک کنید Try it out، چند فایل را انتخاب کنید و کلیک کنید Execute.عملیات باید مشابه شکل زیر و نتیجه پس از اجرا با json زیر شکل باشد.

{
“estado”: “ok”,
“data”: {
“quantidade”: 3
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. ایجاد روش در سرویس برای بازگشت اطلاعات فایل

در فایل src/upload/upload.service.ts روش را ایجاد کنید responderInformacoesArquivos(arquivos: Array) و پیاده سازی را مطابق فایل (تفاوت) زیر قرار دهید.

import { Injectable } from ‘@nestjs/common’;

@Injectable()
export class UploadService {
responderInformacaoArquivo(arquivo: Express.Multer.File) {
return {
estado: ‘ok’,
dados: {
nome: arquivo.originalname,
tamanho: arquivo.size,
mimetype: arquivo.mimetype,
encode: arquivo.encoding,
},
};
}
++
++ responderInformacoesArquivos(arquivos: Array) {
++ const informacoes = arquivos.map((arquivo) => {
++ return {
++ nome: arquivo.originalname,
++ tamanho: arquivo.size,
++ mimetype: arquivo.mimetype,
++ encode: arquivo.encoding,
++ };
++ });
++ return {
++ estado: ‘ok’,
++ dados: {
++ quantidade: arquivos?.length,
++ arquivos: informacoes,
++ },
++ };
++ }
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از اصلاح service باید آن را اصلاح کند controller در فایل src/upload/upload.controller.ts مطابق فایل زیر برای فراخوانی روش responderInformacoesArquivos.

import {
Controller,
Post,
UploadedFile,
UploadedFiles,
UseInterceptors,
} from ‘@nestjs/common’;
import { FileInterceptor, FilesInterceptor } from ‘@nestjs/platform-express’;
import {
ApiBadRequestResponse,
ApiBody,
ApiConsumes,
ApiOperation,
ApiResponse,
ApiTags,
} from ‘@nestjs/swagger’;
import { UploadService } from ‘./upload.service’;

@Controller(‘upload’)
@ApiTags(‘upload’)
export class UploadController {
constructor(private readonly uploadService: UploadService) {}

@Post(‘exemplo-simples’)
@UseInterceptors(FileInterceptor(‘arquivo’))
@ApiConsumes(‘multipart/form-data’)
@ApiBody({
schema: {
type: ‘object’,
properties: {
arquivo: {
type: ‘string’,
format: ‘binary’,
},
},
},
})
@ApiOperation({ summary: ‘Exemplo de upload de 1 arquivo qualquer’ })
@ApiResponse({ status: 201, description: ‘Arquivo enviado com sucesso.’ })
@ApiResponse({ status: 400, description: ‘Erro no envio do arquivo.’ })
uploadArquivoSimples(@UploadedFile() arq: Express.Multer.File) {
console.log(arq);

return this.uploadService.responderInformacaoArquivo(arq);
}

@Post(‘arquivos’)
@ApiConsumes(‘multipart/form-data’)
@ApiBody({
schema: {
type: ‘object’,
properties: {
arquivos: {
type: ‘array’,
items: {
type: ‘string’,
format: ‘binary’,
},
},
},
},
})
@ApiResponse({
status: 201,
description: ‘Arquivo(s) enviado(s) com sucesso.’,
})
@ApiBadRequestResponse({
status: 400,
description: ‘Erro no envio de arquivos.’,
})
@UseInterceptors(FilesInterceptor(‘arquivos’))
uploadArquivos(@UploadedFiles() arquivos: Array) {
— return {
— estado: ‘ok’,
— dados: {
— quantidade: arquivos?.length,
— arquivos: informacoes,
— },
— };
++ return this.uploadService.responderInformacoesArquivos(arquivos);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای تست، می توانید دوباره از اسناد API همانطور که در شکل قبل نشان داده شده است استفاده کنید.نتیجه اکنون مشابه خواهد بود json زیر

{
“estado”: “ok”,
“dados”: {
“quantidade”: 3,
“arquivos”: [
{
“nome”: “README.md”,
“tamanho”: 1373,
“mimetype”: “text/markdown”,
“encode”: “7bit”
},
{
“nome”: “package.json”,
“tamanho”: 2020,
“mimetype”: “application/json”,
“encode”: “7bit”
},
{
“nome”: “Captura de tela de 2024-09-15 15-35-33.png”,
“tamanho”: 44726,
“mimetype”: “image/png”,
“encode”: “7bit”
}
] }
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرجع و لینک

یادداشت های کلاس بر اساس آموزش/مستندات nestjs

[upload-api] $ npm run start:dev

[11:58:35] Starting compilation in watch mode...

[11:58:37] Found 0 errors. Watching for file changes.

[Nest] 12346  - 15/09/2024, 11:58:38     LOG [NestFactory] Starting Nest application...
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [InstanceLoader] AppModule dependencies initialized +14ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [InstanceLoader] UploadModule dependencies initialized +1ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [RoutesResolver] AppController {/}: +15ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [RouterExplorer] Mapped {/, GET} route +3ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [RoutesResolver] UploadController {/upload}: +0ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [RouterExplorer] Mapped {/upload/exemplo-simples, POST} route +2ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [NestApplication] Nest application successfully started +4ms

import {
  Controller,
  Post,
  UploadedFile,
++  UploadedFiles,
  UseInterceptors,
} from '@nestjs/common';
--import { FileInterceptor } from '@nestjs/platform-express';
++import { FileInterceptor, FilesInterceptor } from '@nestjs/platform-express';
import {
++  ApiBadRequestResponse,
  ApiBody,
  ApiConsumes,
  ApiOperation,
  ApiResponse,
  ApiTags,
} from '@nestjs/swagger';
import { UploadService } from './upload.service';

@Controller('upload')
@ApiTags('upload')
export class UploadController {
  constructor(private readonly uploadService: UploadService) {}

  @Post('exemplo-simples')
  @UseInterceptors(FileInterceptor('arquivo'))
  @ApiConsumes('multipart/form-data')
  @ApiBody({
    schema: {
      type: 'object',
      properties: {
        arquivo: {
          type: 'string',
          format: 'binary',
        },
      },
    },
  })
  @ApiOperation({ summary: 'Exemplo de upload de 1 arquivo qualquer' })
  @ApiResponse({ status: 201, description: 'Arquivo enviado com sucesso.' })
  @ApiResponse({ status: 400, description: 'Erro no envio do arquivo.' })
  uploadArquivoSimples(@UploadedFile() arq: Express.Multer.File) {
    console.log(arq);

    return this.uploadService.responderInformacaoArquivo(arq);
  }

++  @Post('arquivos')
++  @UseInterceptors(FilesInterceptor('arquivos'))
++  @ApiConsumes('multipart/form-data')
++  @ApiBody({
++    schema: {
++      type: 'object',
++      properties: {
++        arquivos: {
++          type: 'array',
++          items: {
++            type: 'string',
++            format: 'binary',
++          },
++        },
++      },
++    },
++  })
++  @ApiResponse({
++    status: 201,
++    description: 'Arquivo(s) enviado(s) com sucesso.',
++  })
++  @ApiBadRequestResponse({
++    status: 400,
++    description: 'Erro no envio de arquivos.',
++  })
++  uploadArquivos(@UploadedFiles() arquivos: Array) {
++    return {
++      estado: 'ok',
++      data: {
++        quantidade: arquivos?.length,
++      },
++    };
++  }
}

[11:58:35] Starting compilation in watch mode...

[11:58:37] Found 0 errors. Watching for file changes.

[Nest] 12346  - 15/09/2024, 11:58:38     LOG [NestFactory] Starting Nest application...
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [InstanceLoader] AppModule dependencies initialized +14ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [InstanceLoader] UploadModule dependencies initialized +1ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [RoutesResolver] AppController {/}: +15ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [RouterExplorer] Mapped {/, GET} route +3ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [RoutesResolver] UploadController {/upload}: +0ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [RouterExplorer] Mapped {/upload/exemplo-simples, POST} route +2ms
[Nest] 12346  - 15/09/2024, 11:58:38     LOG [NestApplication] Nest application successfully started +4ms

{
  "estado": "ok",
  "data": {
    "quantidade": 3
  }
}

import { Injectable } from '@nestjs/common';

@Injectable()
export class UploadService {
  responderInformacaoArquivo(arquivo: Express.Multer.File) {
    return {
      estado: 'ok',
      dados: {
        nome: arquivo.originalname,
        tamanho: arquivo.size,
        mimetype: arquivo.mimetype,
        encode: arquivo.encoding,
      },
    };
  }
++
++  responderInformacoesArquivos(arquivos: Array) {
++    const informacoes = arquivos.map((arquivo) => {
++      return {
++        nome: arquivo.originalname,
++        tamanho: arquivo.size,
++        mimetype: arquivo.mimetype,
++        encode: arquivo.encoding,
++      };
++    });
++    return {
++      estado: 'ok',
++      dados: {
++        quantidade: arquivos?.length,
++        arquivos: informacoes,
++      },
++    };
++  }
}

import {
  Controller,
  Post,
  UploadedFile,
  UploadedFiles,
  UseInterceptors,
} from '@nestjs/common';
import { FileInterceptor, FilesInterceptor } from '@nestjs/platform-express';
import {
  ApiBadRequestResponse,
  ApiBody,
  ApiConsumes,
  ApiOperation,
  ApiResponse,
  ApiTags,
} from '@nestjs/swagger';
import { UploadService } from './upload.service';

@Controller('upload')
@ApiTags('upload')
export class UploadController {
  constructor(private readonly uploadService: UploadService) {}

  @Post('exemplo-simples')
  @UseInterceptors(FileInterceptor('arquivo'))
  @ApiConsumes('multipart/form-data')
  @ApiBody({
    schema: {
      type: 'object',
      properties: {
        arquivo: {
          type: 'string',
          format: 'binary',
        },
      },
    },
  })
  @ApiOperation({ summary: 'Exemplo de upload de 1 arquivo qualquer' })
  @ApiResponse({ status: 201, description: 'Arquivo enviado com sucesso.' })
  @ApiResponse({ status: 400, description: 'Erro no envio do arquivo.' })
  uploadArquivoSimples(@UploadedFile() arq: Express.Multer.File) {
    console.log(arq);

    return this.uploadService.responderInformacaoArquivo(arq);
  }

  @Post('arquivos')
  @ApiConsumes('multipart/form-data')
  @ApiBody({
    schema: {
      type: 'object',
      properties: {
        arquivos: {
          type: 'array',
          items: {
            type: 'string',
            format: 'binary',
          },
        },
      },
    },
  })
  @ApiResponse({
    status: 201,
    description: 'Arquivo(s) enviado(s) com sucesso.',
  })
  @ApiBadRequestResponse({
    status: 400,
    description: 'Erro no envio de arquivos.',
  })
  @UseInterceptors(FilesInterceptor('arquivos'))
  uploadArquivos(@UploadedFiles() arquivos: Array) {
--    return {
--      estado: 'ok',
--      dados: {
--        quantidade: arquivos?.length,
--        arquivos: informacoes,
--      },
--    };
++    return this.uploadService.responderInformacoesArquivos(arquivos);
  }
}

{
  "estado": "ok",
  "dados": {
    "quantidade": 3,
    "arquivos": [
      {
        "nome": "README.md",
        "tamanho": 1373,
        "mimetype": "text/markdown",
        "encode": "7bit"
      },
      {
        "nome": "package.json",
        "tamanho": 2020,
        "mimetype": "application/json",
        "encode": "7bit"
      },
      {
        "nome": "Captura de tela de 2024-09-15 15-35-33.png",
        "tamanho": 44726,
        "mimetype": "image/png",
        "encode": "7bit"
      }
    ]
  }
}