NestJS接收双form-data控制器报错，求正确实现方案

错误原因分析 #

你当前的控制器写法存在两个核心问题：

1. 重复使用FileInterceptor会冲突：FileInterceptor只能处理单个文件字段，多次添加会覆盖前一个拦截器的配置，导致请求解析失败。
2. importConfig的获取方式错误：Angular代码中将importConfig包装成Blob后作为文件项上传，此时它属于form-data的文件字段，而非普通表单字段，无法通过@Body()获取。

方案一：适配当前Angular请求（处理双文件字段） #

使用FileFieldsInterceptor处理多个不同名称的文件/Blob字段，这是匹配你现有Angular请求的正确方式：

控制器代码 #

import { Controller, Post, UseInterceptors, UploadedFiles } from '@nestjs/common';
import { FileFieldsInterceptor } from '@nestjs/platform-express';
import { PreviewImportConfig } from './your-path-to-config'; // 替换为你的类型导入路径

@Controller('your-controller-path') // 替换为你的控制器路径
export class YourController {
  constructor(private readonly schemaUploadService: SchemaUploadService) {}

  @Post('/import-schema')
  @UseInterceptors(FileFieldsInterceptor([
    { name: 'importConfig', maxCount: 1 }, // 对应Angular里的importConfig字段
    { name: 'file', maxCount: 1 }, // 对应file字段
  ]))
  previewFile(
    @UploadedFiles() files: { 
      importConfig?: Express.Multer.File[], 
      file?: Express.Multer.File[] 
    },
  ) {
    // 解析importConfig：将Blob的buffer转为JSON对象
    const importConfig = JSON.parse(files.importConfig[0].buffer.toString()) as PreviewImportConfig;
    const uploadedFile = files.file[0];

    console.log('解析后的配置:', importConfig);
    console.log('上传的文件:', uploadedFile);

    return this.schemaUploadService.createPreviewImportWarnResponse();
  }
}

方案二：调整Angular请求（简化Nest处理） #

如果允许修改Angular代码，可以去掉Blob包装，直接将importConfig作为普通form-data字段上传，这样Nest控制器的写法更简洁：

修改后的Angular服务代码 #

public importSchema(file: File, importConfig: PreviewImportConfig): Observable<HttpEvent<SchemaParseResponse>> {
  const formData = new FormData();
  // 直接添加JSON字符串，而非Blob
  formData.append('importConfig', JSON.stringify(importConfig));
  formData.append('file', file);

  const req = new HttpRequest('POST', url, formData, {
    reportProgress: true,
    responseType: 'json',
  });
  return this.http.request<SchemaParseResponse>(req);
}

对应的Nest控制器代码 #

import { Controller, Post, UseInterceptors, UploadedFile, Body } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { PreviewImportConfig } from './your-path-to-config';

@Controller('your-controller-path')
export class YourController {
  constructor(private readonly schemaUploadService: SchemaUploadService) {}

  @Post('/import-schema')
  @UseInterceptors(FileInterceptor('file'))
  previewFile(
    @UploadedFile() file: Express.Multer.File,
    @Body() importConfig: PreviewImportConfig, // 直接通过@Body获取普通表单字段
  ) {
    console.log('上传的文件:', file);
    console.log('配置:', importConfig);

    return this.schemaUploadService.createPreviewImportWarnResponse();
  }
}

注意事项 #

• 确保你已经在Nest项目中正确配置了MulterModule（如果需要自定义文件存储路径、大小限制等），默认配置即可处理基础的文件上传。
• 两种方案都能解决Bad Request问题，选择哪种取决于你是否允许修改前端代码。

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