如何在NestJS中启用Swagger图片上传按钮？配置后未生效

安全阿岳

2026-8-15

NestJS Swagger图片上传按钮不显示问题解决

你当前的配置仅手动定义了schema，但Swagger未识别出这是文件上传字段，所以只显示二进制提示而没有上传按钮。以下是可行的解决方法：

方法一：配合文件拦截器+正确的@ApiBody配置

确保控制器方法中使用FileInterceptor处理文件上传，同时保留@ApiConsumes和正确的@ApiBody配置：

import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { ApiOperation, ApiConsumes, ApiBody } from '@nestjs/swagger';

@Controller('user')
export class UserController {
  @ApiOperation({ summary: 'Upload and update user avatar' })
  @ApiConsumes('multipart/form-data')
  @ApiBody({
    schema: {
      type: 'object',
      properties: {
        file: {
          type: 'string',
          format: 'binary',
        },
      },
    },
  })
  @Post('avatar')
  @UseInterceptors(FileInterceptor('file'))
  uploadAvatar(@UploadedFile() file: Express.Multer.File) {
    // 这里编写文件处理逻辑
    return { filename: file.filename };
  }
}

方法二：使用DTO配合@ApiProperty

创建一个上传DTO类，通过@ApiProperty标记文件字段，让Swagger自动识别：

定义DTO：

import { ApiProperty } from '@nestjs/swagger';

export class UploadAvatarDto {
  @ApiProperty({ type: 'string', format: 'binary', description: '用户头像文件' })
  file: any;
}

在控制器中使用：

@ApiOperation({ summary: 'Upload and update user avatar' })
@ApiConsumes('multipart/form-data')
@ApiBody({ type: UploadAvatarDto })
@Post('avatar')
@UseInterceptors(FileInterceptor('file'))
uploadAvatar(@UploadedFile() file: Express.Multer.File) {
  // 文件处理逻辑
}