nest 实现简单的图片上传 + 静态文件 + swagger 配置
我正在参加「掘金·启航计划」
效果图
安装
//文件上传库
npm i -D multer
//multer类型库提示库
npm i -D @types/multer
//静态文件库
npm install --save @nestjs/serve-static
//安装swagger库
npm install --save @nestjs/swagger
swagger 配置
安装完@nestjs/swagger 后修改 mian.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { HttpExceptionFilter } from './middleware/http-exception/http-exception.filter';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import * as session from 'express-session';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.useGlobalFilters(new HttpExceptionFilter());
const config = new DocumentBuilder()
.setTitle('swagger example')
.setDescription('The swagger API description')
.setVersion('1.0')
.build();
const document = SwaggerModule.createDocument(app, config);
SwaggerModule.setup('api', app, document);
//使用session
app.use(
session({
secret: 'my-secret',
resave: false,
saveUninitialized: false,
name: 'my-session-id',
}),
);
await app.listen(3000);
}
bootstrap();
- SwaggerModule.setup('api', app, document):设置根路径，此时可通过 http://localhost:3000/api#/查看文档
创建 upload 模块
nest g res upload
文件上传
import {
Controller,
Post,
UseInterceptors,
UploadedFile,
Res,
} from '@nestjs/common';
import { UploadService } from './upload.service';
import { FileInterceptor } from '@nestjs/platform-express';
import { SkipAuthGuard } from '@/middleware/auth-guard/skip-auth-guard';
import { UpdateUploadDto } from './dto/update-upload.dto';
import { ApiConsumes, ApiBody, ApiTags } from '@nestjs/swagger';
@Controller('upload')
export class UploadController {
constructor(private readonly uploadService: UploadService) {}
//跳过身份校验
@SkipAuthGuard()
@Post()
@UseInterceptors(FileInterceptor('file'))
@ApiTags('upload')
@ApiConsumes('multipart/form-data')
@ApiBody({
description: 'Upload file',
type: UpdateUploadDto,
})
uploadFile(@UploadedFile() file: Express.Multer.File, @Res() res) {
res.sendResponse('上传成功', true, '上传成功');
}
}
- @UseInterceptors(FileInterceptor('file')):文件上传拦截器附加到请求处理，并指定上传的文件域名称为'file'
- @ApiConsumes('multipart/form-data'):描述 API 接口的请求格式为 multipart/form-data
- @ApiTags 对文档进行分类
dto 编写
UpdateUploadDto
import { PartialType } from '@nestjs/swagger';
import { CreateUploadDto } from './create-upload.dto';
import { IsNotEmpty } from 'class-validator';
import { ApiProperty } from '@nestjs/swagger';
import { extname } from 'path';
export class UpdateUploadDto extends PartialType(CreateUploadDto) {
@ApiProperty({ type: 'string', format: 'binary' })
@IsNotEmpty()
file: any;
validateFileTypes(fileTypes: string[]) {
const fileExtName = extname(this['file'].originalname);
return fileTypes.includes(fileExtName);
}
}
模块使用
import { Module } from '@nestjs/common';
import { UploadService } from './upload.service';
import { UploadController } from './upload.controller';
import { MulterModule } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
import { ServeStaticModule } from '@nestjs/serve-static';
import * as path from 'path';
@Module({
imports: [
MulterModule.register({
storage: diskStorage({
//文件上传的地址
destination: path.join(__dirname, '../uploads'),
filename: (req, file, callback) => {
const name = file.originalname.split('.')[0];
const fileExtName = path.extname(file.originalname);
callback(null, `${name}${fileExtName}`);
},
}),
}),
ServeStaticModule.forRoot({
//静态文件目录
rootPath: path.join(__dirname, '..', 'uploads'),
}),
],
controllers: [UploadController],
providers: [UploadService],
})
export class UploadModule {}
此时就可以通过 http://localhost:3000/\*\*\*\*/.jpg 访问到具体的静态文件了
