NestJS 入门教程（四）：文件上传和下载功能的实现

于 2025-04-20 16:19:51 发布
阅读量351 收藏 7
点赞数 4
CC 4.0 BY-SA版权
分类专栏： Nestjs入门 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42072714/article/details/147366987

1. 前言

在上一篇文章中，我们实现了用户认证和授权功能。本文将介绍如何实现文件上传和下载功能，包括单文件上传、多文件上传、文件下载等。

2. 安装依赖

首先安装文件处理相关的依赖：

pnpm add @nestjs/platform-express multer @types/multer

3. 创建文件模块

使用 NestJS CLI 创建文件模块：

nest g module file
nest g controller file
nest g service file

4. 配置文件上传

在 src/modules/file/config/multer.config.ts 中创建 Multer 配置：

import { diskStorage } from 'multer';
import { extname } from 'path';
import { v4 as uuid } from 'uuid';

export const multerConfig = {
  storage: diskStorage({
    destination: './uploads',
    filename: (req, file, callback) => {
      const fileExtName = extname(file.originalname);
      const fileName = `${uuid()}${fileExtName}`;
      callback(null, fileName);
    },
  }),
  fileFilter: (req, file, callback) => {
    if (!file.originalname.match(/\.(jpg|jpeg|png|gif|pdf|doc|docx|xls|xlsx)$/)) {
      return callback(new Error('Only image, PDF and document files are allowed!'), false);
    }
    callback(null, true);
  },
  limits: {
    fileSize: 5 * 1024 * 1024, // 5MB
  },
};

5. 实现文件服务

在 src/modules/file/file.service.ts 中实现文件服务：

import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { join } from 'path';
import { existsSync, mkdirSync } from 'fs';

@Injectable()
export class FileService {
  constructor(private configService: ConfigService) {
    const uploadPath = join(process.cwd(), 'uploads');
    if (!existsSync(uploadPath)) {
      mkdirSync(uploadPath);
    }
  }

  getFileUrl(filename: string): string {
    const baseUrl = this.configService.get('BASE_URL');
    return `${baseUrl}/uploads/${filename}`;
  }

  getFilePath(filename: string): string {
    return join(process.cwd(), 'uploads', filename);
  }
}

6. 实现文件控制器

在 src/modules/file/file.controller.ts 中实现文件控制器：

import { Controller, Post, UploadedFile, UseInterceptors, Get, Param, Res, UseGuards } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { FileService } from './file.service';
import { Response } from 'express';
import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
import { multerConfig } from './config/multer.config';

@Controller('file')
@UseGuards(JwtAuthGuard)
export class FileController {
  constructor(private readonly fileService: FileService) {}

  @Post('upload')
  @UseInterceptors(FileInterceptor('file', multerConfig))
  uploadFile(@UploadedFile() file: Express.Multer.File) {
    return {
      filename: file.filename,
      originalname: file.originalname,
      size: file.size,
      mimetype: file.mimetype,
      url: this.fileService.getFileUrl(file.filename),
    };
  }

  @Get(':filename')
  async getFile(@Param('filename') filename: string, @Res() res: Response) {
    const filePath = this.fileService.getFilePath(filename);
    res.sendFile(filePath);
  }
}

7. 更新文件模块

在 src/modules/file/file.module.ts 中更新模块配置：

import { Module } from '@nestjs/common';
import { FileController } from './file.controller';
import { FileService } from './file.service';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [ConfigModule],
  controllers: [FileController],
  providers: [FileService],
  exports: [FileService],
})
export class FileModule {}

8. 实现多文件上传

在 src/modules/file/file.controller.ts 中添加多文件上传方法：

import { Controller, Post, UploadedFiles, UseInterceptors, UseGuards } from '@nestjs/common';
import { FilesInterceptor } from '@nestjs/platform-express';
import { FileService } from './file.service';
import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
import { multerConfig } from './config/multer.config';

@Controller('file')
@UseGuards(JwtAuthGuard)
export class FileController {
  // ... 其他代码 ...

  @Post('upload-multiple')
  @UseInterceptors(FilesInterceptor('files', 10, multerConfig))
  uploadMultipleFiles(@UploadedFiles() files: Array<Express.Multer.File>) {
    return files.map(file => ({
      filename: file.filename,
      originalname: file.originalname,
      size: file.size,
      mimetype: file.mimetype,
      url: this.fileService.getFileUrl(file.filename),
    }));
  }
}

9. 更新环境变量

在 .env 文件中添加基础 URL：

BASE_URL=http://localhost:3000

10. 测试文件上传和下载

使用 Postman 测试文件上传和下载功能：

  1. 单文件上传
POST http://localhost:3000/file/upload
Content-Type: multipart/form-data

file: [选择文件]
  1. 多文件上传
POST http://localhost:3000/file/upload-multiple
Content-Type: multipart/form-data

files: [选择多个文件]
  1. 文件下载
GET http://localhost:3000/file/filename.jpg

11. 实现文件管理功能

  1. 创建文件实体
// src/modules/file/entities/file.entity.ts
import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn } from 'typeorm';

@Entity('files')
export class File {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  filename: string;

  @Column()
  originalname: string;

  @Column()
  mimetype: string;

  @Column()
  size: number;

  @Column()
  url: string;

  @CreateDateColumn()
  createdAt: Date;
}
  1. 更新文件服务
// src/modules/file/file.service.ts
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { File } from './entities/file.entity';
import { ConfigService } from '@nestjs/config';
import { join } from 'path';
import { existsSync, mkdirSync, unlinkSync } from 'fs';

@Injectable()
export class FileService {
  constructor(
    @InjectRepository(File)
    private fileRepository: Repository<File>,
    private configService: ConfigService,
  ) {
    const uploadPath = join(process.cwd(), 'uploads');
    if (!existsSync(uploadPath)) {
      mkdirSync(uploadPath);
    }
  }

  async create(file: Express.Multer.File) {
    const fileEntity = this.fileRepository.create({
      filename: file.filename,
      originalname: file.originalname,
      mimetype: file.mimetype,
      size: file.size,
      url: this.getFileUrl(file.filename),
    });
    return this.fileRepository.save(fileEntity);
  }

  async findAll() {
    return this.fileRepository.find();
  }

  async findOne(id: number) {
    return this.fileRepository.findOne({ where: { id } });
  }

  async remove(id: number) {
    const file = await this.findOne(id);
    if (file) {
      const filePath = this.getFilePath(file.filename);
      if (existsSync(filePath)) {
        unlinkSync(filePath);
      }
      await this.fileRepository.delete(id);
    }
  }

  getFileUrl(filename: string): string {
    const baseUrl = this.configService.get('BASE_URL');
    return `${baseUrl}/uploads/${filename}`;
  }

  getFilePath(filename: string): string {
    return join(process.cwd(), 'uploads', filename);
  }
}
  1. 更新文件控制器
// src/modules/file/file.controller.ts
import { Controller, Post, UploadedFile, UseInterceptors, Get, Param, Res, UseGuards, Delete } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { FileService } from './file.service';
import { Response } from 'express';
import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
import { multerConfig } from './config/multer.config';

@Controller('file')
@UseGuards(JwtAuthGuard)
export class FileController {
  constructor(private readonly fileService: FileService) {}

  @Post('upload')
  @UseInterceptors(FileInterceptor('file', multerConfig))
  async uploadFile(@UploadedFile() file: Express.Multer.File) {
    return this.fileService.create(file);
  }

  @Get()
  findAll() {
    return this.fileService.findAll();
  }

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.fileService.findOne(+id);
  }

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.fileService.remove(+id);
  }

  @Get('download/:filename')
  async getFile(@Param('filename') filename: string, @Res() res: Response) {
    const filePath = this.fileService.getFilePath(filename);
    res.download(filePath);
  }
}

12. 总结

本文介绍了如何：

  • 实现单文件上传
  • 实现多文件上传
  • 实现文件下载
  • 实现文件管理功能

在下一篇文章中，我们将介绍如何实现 WebSocket 实时通信功能。

13. 常见问题

  1. 文件上传失败

    • 检查文件大小限制
    • 验证文件类型
    • 确保上传目录存在且有写入权限

  2. 文件下载失败

    • 检查文件路径是否正确
    • 验证文件是否存在
    • 确保有读取权限

  3. 文件管理问题

    • 定期清理未使用的文件
    • 实现文件备份机制
    • 考虑使用云存储服务

14. 下一步

在下一篇文章中，我们将：

  • 实现 WebSocket 服务
  • 实现实时消息推送
  • 实现聊天功能
  • 实现通知功能
nestjs 全栈进阶--文件上传
wangyuiba1314的博客
08-08 674
允许跨域。
2024 Nestjs入门到实战
喜欢学习新知识
10-13 1806
文章目录前提-安装环境介绍 (了解即可)安装nestjs, 创建新项目, 启动新项目nestcli命令 (建议熟练掌握, 可提高开发效率)IoC（控制反转）和DI（依赖注入）概念详解IoC（控制反转）DI（依赖注入）两种思想的概念示例代码总结在nestjs中的三种依赖注入方式为什么 Controller 是单独的装饰器？@Module机制装饰器概念四种装饰器在ts中自定义装饰器类装饰器属性装饰器方法装饰器参数装饰器示例代码nestjs控制器和参数获取nest-provider基本用法Provider自定义名
NestJs的文件上传
12day的博客
04-06 1761
这里说下NestJs的两种上传文件方式
7.nestjs文件上传
zyf_baby的博客
01-19 2156
nestjs文件上传文件上传单个文件上传多文件上传 文件上传 单个文件上传 // 1.依赖引入 UseInterceptors, UploadedFile, FileInterceptor import { Controller, Get, Post, Render, Body, UseInterceptors, UploadedFile } from '@nestjs/common'; import { FileInterceptor } from '@nestjs/platform-express';
NestJs 使用上传功能
qq_33003143的博客
08-16 989
记录NestJs文件上传的知识点
nestjs学习：文件上传
m0_66583360的博客
09-18 649
​nest提供了一个基于express-multer中间件包的内置模块。Multer处理以multipart/form-data格式发布的数据，该格式主要用于通过HTTP POST请求上传文件继承自FileValidator/***//***/校验文件大小return `文件${file.originalname}大小超过10K`;}),}),) {}
Nestjs配置文件上传, 配置中间件以及管道的使用
Wang的专栏
07-03 3120
安装插件示例1 ） 简单单个上传前端代码 后端代码 2 ） 多文件上传 或者使用Any类型的拦截器AnyFilesInterceptor 需要注意的是，我们每次上传时，这些路径，图片处理什么的，需要封装一下 Nestjs 中间件 同express一样，nestjs中间件也可以理解为在请求和响应之间的一个管道处理程序 可以是一个函数，也可以是一个@Injectable() 装饰器装饰的类 中间件作用中间件的创建和使用1 ) 创建 我们按照文档上，改造一下 2 ） 在app.module
nestjs实现文件上传功能
博客
07-20 572
通过express的multer包实现文件上传，并且封装了一个装饰器来接收文件@UploadedFile()在contronller中，创建一个函数接收文件，并传给service层处理。service：拿到文件后读写文件，并返回访问路劲。
nodejs企业级开发框架nest学习总结 - 5.NestJS入门使用mongoose、multer、验证、缓存、安全等
mackJun的博客
09-15 2621
mongoose、multer、验证、缓存、安全等 官方nestjsAPI地址 1.nestjs结合mongoose 1.1 安装mongoose和nest相关 cnpm i @nestjs/mongoose mongoose --save 1.2 配置连接数据库 方式1，直接配置 // mongo.module.ts import { Module } from '@nestjs/commo...
掌握NestJS上传文件功能，实现高效服务端应用开发
本资源提供了关于 NestJS 的基础入门资料，包括如何进行框架的安装、运行、测试等操作步骤。" NestJS 是一个构建服务器端应用程序的框架，它使用 TypeScript 编写，但可以兼容纯 JavaScript。NestJS 提供了一个层次...
基于nestjs与vue3的大文件上传.zip
07-08
基于nestjs与vue3的大文件上传.zip
后端框架 Nest 入门教程: 开发学生信息管理系统
m0_72650596的博客
08-02 663
作为一个前端，是否有想过学习下后端，做一个完整的应用？如果你只是想体验下服务器端，可以选择Express[1]。它更容易上手。如果你想做一个企业级应用，推荐使用Nest。Nest[2](NestJS)是一个可构建高效、可扩展的Node.js后端框架。Nest集成了服务端常见场景的解决方案，如数据库，文件上传，任务定时器，消息队列，日志，Cookie，Session，缓存，鉴权，GraphQL，WebSocket，微服务。同时，Nest也提供组织代码的方法论。...
Nest 从零开始/Nest 操作记录/Nest 操作示例/Nest 简单教程
csdn1940879828的博客
05-29 1775
简单示例Nest简单教程，简单操作示例，nest跨域，nest分页查询，nest增删改查，nest使用passport，nest实现JWT鉴权，nest自定义路由守卫，nest使用Typyorm实现多对多一对多，nest事物，nest自定义class-validator，nest使用节流，nest使用redis
一文带你弄懂nest.js文件上传
qq_63204040的博客
06-22 2515
nest.js文件上传
NestJs文件上传和流处理文件1
Coke__Sprite的博客
08-19 546
导读：文件上传是一个很常见的场景，这里我们将学习单个文件上传，文件数组，多个文件，配置，访问。
Nest.js 实战 (五)：如何实现文件本地上传
白雾茫茫丶
07-30 1245
这篇文章介绍了使用Nest框架和multer中间件包实现文件上传功能的过程。首先，作者在开发用户管理模块时遇到了需要上传用户头像的需求，因此开发了文件上传功能。文章详细介绍了如何安装依赖，如何处理单个文件上传，如何在模块层注册并配置文件上传路径，并以代码形式展示了如何实现这些功能。最后，作者对使用第三方平台存储文件进行了说明，并建议业务量大的公司很少用上传到服务器本地的方式，该方式更适合个人站点、博客使用。
postman+nestjs文件上传踩坑记录
God_pigs的博客
07-18 2040
使用nestjs + postman进行文件上传测试注意点
nestjs 实现文件上传及参数验证
qq_42879900的博客
01-17 730
当在 NestJS 中实现文件上传以及参数验证时，我们可以使用 multer 中间件来处理文件上传。
nestjs 上传文件
最新发布
05-22
### 文件上传功能的实现 在 NestJS 中实现文件上传功能通常涉及以下几个方面： #### 1. 安装依赖库 为了支持 `multipart/form-data` 类型的数据解析，需要安装 `@nestjs/platform-express` 和 `multer` 库。可以通过以下命令完成安装： ```bash npm install @nestjs/platform-express multer --save ``` #### 2. 配置 MulterModule 通过配置 `MulterModule` 来定义文件存储路径和命名规则。以下是基于引用[^2]的一个示例配置： ```typescript import { Module } from '@nestjs/common'; import { UploadController } from './upload.controller'; import { UploadService } from './upload.service'; import { MulterModule } from '@nestjs/platform-express'; import { diskStorage } from 'multer'; import { extname, join } from 'path'; @Module({ imports: [ MulterModule.register({ storage: diskStorage({ destination: join(__dirname, '../uploadFiles'), // 设置文件保存目录 filename: (req, file, cb) => { const randomName = Array(32).fill(null).map(() => Math.floor(Math.random() * 16).toString(16)).join(''); cb(null, `${randomName}${extname(file.originalname)}`); // 使用随机名称防止重复 }, }), }), ], controllers: [UploadController], providers: [UploadService], }) export class UploadModule {} ``` 此部分代码设置了文件存储位置以及自动生成唯一文件名的功能。 #### 3. 控制器中的文件接收逻辑 控制器负责处理前端发送过来的文件请求。下面是一个完整的例子，展示了如何结合 `FileInterceptor` 实现文件上传[^1]: ```typescript import { Controller, Post, UseInterceptors, UploadedFile, Body } from '@nestjs/common'; import { FileInterceptor } from '@nestjs/platform-express'; import { ApiOperation, ApiConsumes } from '@nestjs/swagger'; import { CreateFileManageDto } from './dto/create-file-manage.dto'; import { FileManageService } from './file-manage.service'; @Controller('files') export class FileController { constructor(private readonly fileManageService: FileManageService) {} @Post('upload') @ApiOperation({ summary: '上传文件' }) @ApiConsumes('multipart/form-data') // 声明接受 multipart/form-data 数据类型 @UseInterceptors(FileInterceptor('file')) upload(@UploadedFile() file, @Body() fileInfo: CreateFileManageDto) { console.log(file); console.log(fileInfo); return this.fileManageService.create(fileInfo); } } ``` 这段代码实现了文件上传的核心逻辑，并且集成了 Swagger 文档的支持[^3]。 #### 4. 处理异常情况 如果希望捕获并优雅地处理可能发生的错误，则可以引入全局异常过滤器来增强系统的健壮性[^4]: ```typescript // main.ts import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; import { HttpExceptionFilter } from './filters/http-exception.filter'; async function bootstrap() { const app = await NestFactory.create(AppModule); // 添加全局异常过滤器 app.useGlobalFilters(new HttpExceptionFilter()); await app.listen(3000); } bootstrap(); ``` 这样当发生任何未被捕获的 HTTP 错误时，都会被该过滤器拦截并返回标准化响应给客户端。 --- ### 总结 以上就是在 NestJS 中实现文件上传的主要流程，涵盖了从环境搭建到具体编码实践的过程。需要注意的是实际开发过程中还应考虑安全性因素比如验证文件大小、类型等限制条件以保护服务器资源免受恶意攻击影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值