NestJS中Swagger文件上传模态框不显示问题求助

你的代码存在两个关键问题，导致Swagger无法显示文件上传模态框：

1. 未声明接口接收multipart/form-data类型请求 #

Swagger需要明确知道接口处理的是包含文件的表单数据，否则不会渲染文件上传控件。必须在控制器方法上添加@ApiConsumes('multipart/form-data')装饰器。

2. DTO中错误包含file字段 #

FileInterceptor('file')已经通过@UploadedFile()装饰器单独接收文件参数，DTO对应的是表单中的文本/布尔类型字段。将file放在DTO里会让Swagger混淆参数结构，且实际请求中file是独立的表单项，不属于Body的一部分。

修改后的控制器代码 #

@UseInterceptors(FileInterceptor('file'))
@Put()
@ApiOperation({
  summary: 'Endpoint used to update values in the checklist Template',
})
@ApiConsumes('multipart/form-data') // 新增该装饰器
@HttpCode(HttpStatus.OK)
async updateChecklistTemplate(
  @Body() setFieldValueDto: UpdateChecklistValueDto,
  @UploadedFile() file: Express.Multer.File,
  @Request() req,
) {
  return await this.checklistTemplatesService.setFieldValue(
    setFieldValueDto,
    req.user.id,
    file,
  );
}

修改后的DTO代码 #

import {
  IsBoolean,
  IsMongoId,
  IsNotEmpty,
  IsString,
} from 'class-validator';
import { ApiProperty } from '@nestjs/swagger';

export class UpdateChecklistValueDto {
  @ApiProperty()
  @IsString()
  @IsNotEmpty()
  @IsMongoId()
  readonly id: string;

  @ApiProperty()
  @IsBoolean()
  @IsNotEmpty()
  readonly isImage: boolean;

  @ApiProperty()
  @IsString()
  @IsNotEmpty()
  readonly entity: string;

  @ApiProperty()
  @IsString()
  @IsNotEmpty()
  readonly value: string;

  // 删除原有的file字段
}

额外验证 #

如果修改后Swagger仍未正常渲染，确认main.ts中的Swagger基础配置无异常：

// main.ts 示例配置
const config = new DocumentBuilder()
  .setTitle('Checklist API')
  .setDescription('The checklist API description')
  .setVersion('1.0')
  .build();
const document = SwaggerModule.createDocument(app, config);
SwaggerModule.setup('api', app, document);

完成以上修改后，Swagger即可显示包含文件上传控件和其他表单字段的测试界面。

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