[NestJS]文件上传、保存到本地、静态资源访问

FileInterceptor 装饰器

使用nestjs提供的装饰器

import { FileInterceptor } from '@nestjs/platform-express'

路由处理

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

  @Post('addFile')
  @UseInterceptors(FileInterceptor('file'))
  create(@UploadedFile() file: Express.Multer.File) {
    console.log(file)
  }
}

在路由处配置 使用拦截器@UseInterceptors传入FileInterceptor(key)并使用UploadedFile装饰器在request中提取file文件，file的类型为Express.Multer.File，可以在express中导入方便我们编写代码

import {Express} from 'express'

需要注意的是 FileInterceptor 在 @nestjs/platform-express 导入，而UseInterceptors则在@nestjs/common中导入

通过postman调试工具上传一个文件可以在控制台中看到已经获取到了文件

文件保存

保存文件我们需要用到 multer 中间件来处理,multer是一个用于处理multipart/form-data类型数据的中间件

npm install multer @types/multer -D -S

import * as multer from 'multer';
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const folderPath = __dirname + '/assets';
    if (!fs.existsSync(folderPath)) {
      fs.mkdirSync(folderPath);
    }
    cb(null, folderPath);
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  },
});

const storage = multer.diskStorage({ ... });

定义一个名为storage的变量，使用了multer.diskStorage()方法来配置如何存储上传的文件。

destination: (req, file, cb) => { ... }

这定义了文件应该存储在哪里。当一个文件被上传时，这个函数会被调用。

• const folderPath = join(__dirname, '../asstes');定义了文件应该存储的目录。这里使用的join需要再path中导入（import { join } from 'path'），__dirname是Node.js的全局变量，表示当前执行脚本所在的目录。所以，这里我们是在当前目录的上一级目录下创建一个名为assets的文件夹来存储上传的文件。
• if (!fs.existsSync(folderPath))为了程序的健壮性，可以使用fs.existsSync()检查该文件夹是否存在。如果不存在则创建
• cb(null, folderPath);: 这是回调函数，告诉multer文件应该存储在哪个目录。

filename: (req, file, cb) => { ... }定义了上传的文件应该如何命名。

• cb(null, Date.now() + '-' + file.originalname);

配置好之后结合上面代码我们把配置传入给FileInterceptor的第二个参数,这样代码就变成了

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const folderPath = join(__dirname, '../assets');
    if (!fs.existsSync(folderPath)) {
      fs.mkdirSync(folderPath);
    }
    cb(null, folderPath);
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  },
});

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

  @Post('addFile')
  @UseInterceptors(FileInterceptor('file', { storage }))
  create(@UploadedFile() file: Express.Multer.File) {
    console.log(file);
  }
}

使用postman测试一下会发现上传成功之后保存在了dist/assets文件夹下

配置静态资源访问

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets(join(__dirname, '/assets'), {
    prefix: '/static/', //设置虚拟前缀路径
    maxAge: 1000 * 60, //设置缓存时间
  });
  await app.listen(3000);
}
bootstrap();

如果不设置prefix 则直接访问http://ip:端口/文件保存名字,如设置前缀则需要再文件之前加入前缀名字http://ip:端口/前缀/文件保存名字