NestJS学习笔记之上传图片-静态目录

1.安装multer及使用

multer   @nestjs/platform-express nestJs自带了
multer   @types/multer

新建upload模块

在upload.module使用MulterModule.register注册存放图片的目录

需要用到multer的diskStorage，destination设置存放目录，extname用来读取文件后缀，filename给文件重新命名

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 { extname, join } from 'path';

@Module({
  imports: [MulterModule.register({
    storage: diskStorage({
      destination: join(__dirname, "../images"),// 图片存放目录
      filename: (_, file, callback) => {
        //定义fileName是为了把上传后的图片重新命名，这里是利用时间戳的形式命名，保证命名的唯一性
        const fileName = `${new Date().getTime() + extname(file.originalname)}`
        return callback(null, fileName)
      }
    })
  })],
  controllers: [UploadController],
  providers: [UploadService],
})
export class UploadModule { }

保存后，启动项目，可以看到项目启动就会打包，在dist目录下如果有images文件夹代表成功了

2.controller 使用

在upload.controller中，使用UseInterceptors装饰器，它里面有一些参数，如果上传单个文件就使用FileInterceptor，如果上传多个文件就使用FilesInterceptor，使用UploadedFile装饰器接受file文件

import { Controller, Get, Post, Body, Patch, Param, Delete, UploadedFile, UseInterceptors } from '@nestjs/common';
import { UploadService } from './upload.service';
import { CreateUploadDto } from './dto/create-upload.dto';
import { UpdateUploadDto } from './dto/update-upload.dto';
import { FileInterceptor } from '@nestjs/platform-express';

@Controller('upload')
export class UploadController {
  constructor(private readonly uploadService: UploadService) {}

  @Post('album')
  @UseInterceptors(FileInterceptor('file'))
  create(@UploadedFile() file) {
    console.log(file);
    return true;
  }

}

使用Apipost进行接口测试

请求成功，并且控制台打印出file的结果了

并且在打包后的dist目录下的images文件夹中可以看到图片已经存放进去了

3.生成静态目录访问上传之后的图片

在mian.ts中导入类型NestExpressApplication

useStaticAssets中的prefix是虚拟前缀

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { VersioningType } from '@nestjs/common';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.enableVersioning({
    type: VersioningType.URI
  })
  app.useStaticAssets(join(__dirname,'images'),{
    prefix:"/zl"
  })
  await app.listen(3000);
}
bootstrap();

此时先去images文件夹下复制我们要访问的图片名称，然后去浏览器中输入地址进行访问

访问http://localhost:3000/zl/1708440096666.jpg