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/'
  });
  • 如此一来,我们便可以访问我们上次的图片了
相关推荐
EF@蛐蛐堂3 分钟前
Federation vs Garfish vs Micro-app 微前端选型(二)
前端·vue.js·前端框架
洋不写bug8 分钟前
前端html基础标签
前端·html
GISer_Jing17 分钟前
前端学习总结——AI&主流前沿方向篇
前端·人工智能·学习
渣哥26 分钟前
用错注入方式?你的代码可能早就埋下隐患
javascript·后端·面试
尘世中一位迷途小书童27 分钟前
Monorepo 工具大比拼:为什么我最终选择了 pnpm + Turborepo?
前端·架构
一枚前端小能手29 分钟前
🔍 重写vue之ref和reactive
前端·javascript·vue.js
星链引擎31 分钟前
4sapi.com开发者进阶版(技术导向,侧重 “原理 + 最佳实践”)
前端
尘世中一位迷途小书童33 分钟前
2025年了,你还在用传统的多仓库管理吗?Monorepo 架构深度解析
前端·架构
fruge36 分钟前
前端性能优化实践指南:从理论到落地
前端·性能优化
王中阳Go39 分钟前
我发现不管是Java还是Golang,懂AI之后,是真吃香!
后端·go·ai编程