Nest.js 中如何使用 FileInterceptor 和 FilesInterceptor 拦截器？

推荐答案

在 Nest.js 中，FileInterceptor 和 FilesInterceptor 是用于处理文件上传的拦截器。它们通常与 @Post 装饰器一起使用，以处理单个或多个文件的上传。

使用 FileInterceptor 处理单个文件上传

// www.javascriptcn.com code example
import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
import { editFileName, imageFileFilter } from './utils/file-upload.utils';

@Controller('upload')
export class UploadController {
  @Post('single')
  @UseInterceptors(
    FileInterceptor('file', {
      storage: diskStorage({
        destination: './uploads',
        filename: editFileName,
      }),
      fileFilter: imageFileFilter,
    }),
  )
  uploadSingleFile(@UploadedFile() file: Express.Multer.File) {
    return {
      filename: file.filename,
    };
  }
}

使用 FilesInterceptor 处理多个文件上传

// www.javascriptcn.com code example
import { Controller, Post, UploadedFiles, UseInterceptors } from '@nestjs/common';
import { FilesInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
import { editFileName, imageFileFilter } from './utils/file-upload.utils';

@Controller('upload')
export class UploadController {
  @Post('multiple')
  @UseInterceptors(
    FilesInterceptor('files', 10, {
      storage: diskStorage({
        destination: './uploads',
        filename: editFileName,
      }),
      fileFilter: imageFileFilter,
    }),
  )
  uploadMultipleFiles(@UploadedFiles() files: Array<Express.Multer.File>) {
    return {
      filenames: files.map(file => file.filename),
    };
  }
}

本题详细解读

FileInterceptor 和 FilesInterceptor 的作用

• FileInterceptor: 用于处理单个文件上传。它接受两个参数：第一个参数是表单字段的名称（即前端上传文件时使用的字段名），第二个参数是一个可选的配置对象，用于指定存储引擎、文件过滤器等。

• FilesInterceptor: 用于处理多个文件上传。它接受三个参数：第一个参数是表单字段的名称，第二个参数是最大文件数量，第三个参数是一个可选的配置对象，与 FileInterceptor 的配置对象相同。

配置对象详解

• storage: 指定文件的存储方式。diskStorage 是常用的存储引擎，允许你将文件保存到磁盘上。你可以通过 destination 指定文件保存的目录，通过 filename 指定文件的命名规则。

• fileFilter: 用于过滤文件。你可以通过自定义的过滤器函数来限制上传文件的类型。例如，只允许上传图片文件。

@UploadedFile 和 @UploadedFiles 装饰器

• @UploadedFile: 用于获取单个上传的文件。它返回一个 Express.Multer.File 对象，包含文件的元数据（如文件名、大小、MIME 类型等）。

• @UploadedFiles: 用于获取多个上传的文件。它返回一个 Express.Multer.File 数组，每个元素都是一个文件对象。

示例代码中的工具函数

• editFileName: 用于生成新的文件名。你可以在这个函数中自定义文件名的生成规则。

• imageFileFilter: 用于过滤文件类型。在这个函数中，你可以检查文件的 MIME 类型，只允许特定类型的文件上传。

通过这些工具函数和拦截器，你可以轻松地在 Nest.js 中实现文件上传功能。