NestJS Swagger无法渲染文件选择器字段问题求助

以下是针对该问题的具体排查方案：

1. 补充缺失的类型依赖 #

项目中缺少@types/multer依赖，可能导致Swagger无法正确识别Express.Multer.File类型，进而影响字段渲染。执行以下命令安装：

npm install @types/multer --save-dev

2. 优化Swagger API文档配置 #

手动编写@ApiBody schema的方式存在兼容性问题，建议改用DTO配合装饰器的标准化方案：

步骤1：创建上传DTO #

// src/dtos/upload.dto.ts
import { ApiProperty } from '@nestjs/swagger';

export class UploadPhotoDto {
  @ApiProperty({ type: 'string', format: 'binary' })
  file: any;
}

步骤2：修改接口装饰器 #

将原有的@ApiBody配置替换为指向该DTO：

@Post('change-photo')
@HttpCode(200)
@UseInterceptors(FileInterceptor('file'))
@ApiConsumes('multipart/form-data')
@ApiBody({ type: UploadPhotoDto }) // 替换为DTO类型
async uploadFile(
  @UploadedFile() file: Express.Multer.File,
  @Req() { user }
) {
  const result = await this._spaceService.uploadPhoto(user.id, file);
  return result;
}

3. 升级Swagger依赖版本 #

当前使用的@nestjs/swagger@5.2.1存在文件上传渲染的已知问题，建议升级到NestJS 8.x兼容的最新版本：

npm install @nestjs/swagger@^5.2.2 --save

4. 检查Swagger全局初始化配置 #

确保main.ts中Swagger初始化逻辑正确，未禁用相关功能：

import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  const config = new DocumentBuilder()
    .setTitle('API文档')
    .setDescription('接口文档')
    .setVersion('1.0')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);

  await app.listen(3000);
}
bootstrap();

尝试以上方案后，重启项目并访问Swagger页面，即可正常显示文件选择器字段。

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