Nest成长足迹（五）：如何上传文件

1、前言

本文章记录自己学习Nest的过程，适于前端及对后端没有基础但对Nest感兴趣的同学，如有错误，欢迎各位大佬指正

2、`Nest`成长足迹系列：

3、正文

本文使用使用到multer，用于处理"multipart/form-data"的 Node.js 中间件。当然也有其他的选择，比如formidable(用于解析表单数据（尤其是文件上传）的 Node.js 模块。)

3.1、安装依赖包

在Nest中，multer已经被内置了，无需我们重新安装，由于Nest是使用TypeScript进行开发，我们为了获得更好的TypeScript类型支持，以确保我们能够充分利用 TypeScript 的优势，更加安全和高效地进行文件上传的开发。我们需要安装@types/multer

sh 复制代码

npm install @types/multer -D

3.2、upload.controller.ts

在这个文件中，我们会定义文件上传的API，指定文件上传后存储的路径以及文件上传后存储的形式
先看源码：

ts 复制代码

import {
  Controller,
  Post,
  UseInterceptors,
  UploadedFile
} from '@nestjs/common';

import { FileInterceptor } from '@nestjs/platform-express';
import { Express } from 'express';
import * as path from 'path';

import { BusinessException } from '@/common/exceptions/business.exception';
import { fileStorage } from '@/utils/file-storage';

@Controller('upload')
export class UploadController {

  @Post('picture')
  @UseInterceptors(
    FileInterceptor('picture', {
      dest: 'uploads',
      storage: fileStorage,
      // 限制图片大小
      limits: {
        fileSize: 1024 * 1024 * 2 // 2M
      },
      // 限制图片格式
      fileFilter(req, file, callback) {
        const extname = path.extname(file.originalname);
        if (['.png', '.jpg', '.gif', '.jpeg'].includes(extname)) {
          callback(null, true);
        } else {
          callback(new BusinessException('只能上传图片！'), false);
        }
      }
    })
  )
  uploadPicture(@UploadedFile() file: Express.Multer.File) {
    return file;
  }
}

ts 复制代码

import { diskStorage } from 'multer';
import * as path from 'path';

export const fileStorage = diskStorage({
  destination: path.join(__dirname, '../../uploads'),
  // 自定义上传的文件名字
  filename: (req, file, cb) => {
    const singFileArray = file.originalname.split('.');
    const fileExtension = singFileArray[singFileArray.length - 1]; // 文件后缀名
    const newFilename = `${singFileArray[0]}_${Date.now()}.${fileExtension}`;
    cb(null, newFilename);
  }
});

其中FileInterceptor接收两个参数
- 一个 fieldName (指向包含文件的 HTML 表单的字段)
- 可选 options 对象, 类型为 MulterOptions
uploads指定了文件存储路径
storage指定了文件存储的路径以及文件名的自定义
limits限制文件上传的大小
fileFilter限制图片格式
- 第一个参数是错误信息，如果没有错误的话就传入null
- 第二个参数是是否接受此文件，如果不接受的话，上传文件的时候就会报错
上传成功：

上传失败【格式错误】：

上传失败【文件太大】：

3.3、如何读取上传的图片

我们需要将图片的存储目录设置为静态文件目录

ts 复制代码

import { NestExpressApplication } from '@nestjs/platform-express';

const app = await NestFactory.create<NestExpressApplication>(AppModule);

  // 配置 uploads 文件夹为静态目录，以达到可直接访问下面文件的目的
  app.useStaticAssets('uploads', {
    prefix: '/api/uploads/'
  });

如此一来，我们便可以访问我们上次的图片了

Nest成长足迹（五）：如何上传文件

1、前言

2、Nest成长足迹系列：

3、正文

3.1、安装依赖包

3.2、upload.controller.ts

3.3、如何读取上传的图片

2、`Nest`成长足迹系列：