如何正确配置NestJS 10端点以接收1个字符串字段和2个文件？

你的问题出在错误使用了多个FileInterceptor——FileInterceptor是用来处理单个文件字段的，同时挂载多个会导致请求解析冲突，从而触发"Unexpected field"错误。正确的做法是使用FileFieldsInterceptor来处理多个不同名称的文件字段，同时配合正确的参数装饰器和验证配置。

正确的端点配置代码 #

import { Controller, Post, Body, UploadedFiles, UseInterceptors, Req } from '@nestjs/common';
import { FileFieldsInterceptor } from '@nestjs/platform-express';
import { ParseFilePipe, FileTypeValidator, ParseFilePipeBuilder } from '@nestjs/common';
import { Request } from 'express';

@Controller('your-controller-name')
export class YourController {
  @Post()
  // 使用FileFieldsInterceptor定义两个文件字段
  @UseInterceptors(
    FileFieldsInterceptor([
      { name: 'frontImg', maxCount: 1 }, // maxCount限制每个字段最多上传1个文件
      { name: 'backImg', maxCount: 1 },
    ]),
  )
  async create(
    @Req() req: Request,
    @Body('title') title: string,
    // 使用@UploadedFiles接收多字段文件，同时配置验证规则
    @UploadedFiles(
      new ParseFilePipeBuilder()
        .addFileTypeValidator({ fileType: 'image/jpeg' })
        .build({
          fileIsRequired: true, // 若backImg可选，可单独调整验证规则，见下方说明
        }),
    )
    files: {
      frontImg: Express.Multer.File[];
      backImg?: Express.Multer.File[]; // backImg设为可选
    },
  ) {
    // 业务逻辑示例：获取文件信息、存储文件等
    console.log('Title:', title);
    console.log('Front Image:', files.frontImg[0]);
    if (files.backImg) {
      console.log('Back Image:', files.backImg[0]);
    }
    return { success: true };
  }
}

关键说明 #

1. 拦截器选择：FileFieldsInterceptor专门用于处理多个不同名称的文件字段，配置数组中每个元素对应一个文件字段的名称和最大上传数量。
2. 可选文件的验证调整：如果backImg是可选字段，需要为不同字段单独设置验证规则，示例如下：

   @UploadedFiles()
   files: {
     frontImg: Express.Multer.File[];
     backImg?: Express.Multer.File[];
   },
   // 在方法内部单独验证字段
   async create(...) {
     // 验证必填的frontImg
     new ParseFilePipe({
       validators: [new FileTypeValidator({ fileType: 'image/jpeg' })],
       fileIsRequired: true,
     }).transform(files.frontImg[0]);
     
     // 验证可选的backImg（仅当存在时验证）
     if (files.backImg) {
       new ParseFilePipe({
         validators: [new FileTypeValidator({ fileType: 'image/jpeg' })],
         fileIsRequired: false,
       }).transform(files.backImg[0]);
     }
     // 后续业务逻辑
   }
   

3. Postman请求注意事项：
   • 请求方式选择POST，Body类型设为form-data
   • 添加title字段（类型选Text），再添加frontImg和backImg字段（类型选File），分别选择对应的JPEG文件

内容的提问来源于stack exchange，提问作者Dave