脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → Nest.js multer文件上传

Nest.js使用multer实现文件上传功能

 更新时间：2024年03月15日 08:18:44   作者：云牧  
这篇文章主要为大家详细介绍了Nest.js鹅湖使用multer实现文件上传功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

项目创建与配置

新建 nest 项目：

nest new nest-multer-upload -p npm

安装下 multer 的 ts 类型的包：

npm install @types/multer -D

让 nest 服务支持跨域：

单文件上传

添加一个 handler：

@Post('aaa')
@UseInterceptors(
  FileInterceptor('aaa', {
    dest: 'uploads',
  }),
)
uploadFile(@UploadedFile() file: Express.Multer.File, @Body() body) {
  console.log('body', body);
  console.log('file', file);
}

这里使用 FileInterceptor 提取请求中的 aaa 字段，并通过 UploadedFile 装饰器将其作为参数传递。

当我们运行 nest start --watch 的时候，uploads 文件夹就会创建。

前端代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
	</head>
	<body>
		<input id="fileInput" type="file" multiple />
		<script>
			const fileInput = document.querySelector('#fileInput')

			async function formData() {
				const data = new FormData()
				data.set('name', 'Yun')
				data.set('age', 20)
				data.set('aaa', fileInput.files[0])

				const res = await axios.post('http://localhost:3000/aaa', data)
				console.log(res)
			}

			fileInput.onchange = formData
		</script>
	</body>
</html>

服务端就打印了 file 对象和 body 字段，并且文件也保存到了 uploads 目录：

多文件上传

@Post('bbb')
@UseInterceptors(
  FilesInterceptor('bbb', 3, {
    dest: 'uploads',
  }),
)
uploadFiles(
  @UploadedFiles() files: Array<Express.Multer.File>,
  @Body() body,
) {
  console.log('body', body);
  console.log('files', files);
}

把 FileInterceptor 换成 FilesInterceptor，把 UploadedFile 换成 UploadedFiles，都是多加一个 s。

前端代码：

async function formData2() {
  const data = new FormData()
  data.set('name', 'Yun')
  data.set('age', 20)
  ;[...fileInput.files].forEach(item => {
    data.append('bbb', item)
  })

  const res = await axios.post('http://localhost:3000/bbb', data, {
    headers: { 'content-type': 'multipart/form-data' },
  })
  console.log(res)
}

这样就可以上传多文件了：

如果有多个文件的字段，和 multer 里类似，使用这种方式来指定：

@Post('ccc')
@UseInterceptors(FileFieldsInterceptor([
    { name: 'aaa', maxCount: 2 },
    { name: 'bbb', maxCount: 3 },
], {
    dest: 'uploads'
}))
uploadFileFields(@UploadedFiles() files: { aaa?: Express.Multer.File[], bbb?: Express.Multer.File[] }, @Body() body) {
    console.log('body', body);
    console.log('files', files);
}

前端代码：

async function formData3() {
  const data = new FormData()
  data.set('name', 'Yun')
  data.set('age', 20)
  data.append('aaa', fileInput.files[0])
  data.append('aaa', fileInput.files[1])
  data.append('bbb', fileInput.files[2])
  data.append('bbb', fileInput.files[3])

  const res = await axios.post('http://localhost:3000/ccc', data)
  console.log(res)
}

后端收到了上传的 aaa、bbb 的文件：

如果不知道前端上传字段，哪些是用于文件上传的字段，可以使用 AnyFilesInterceptor：

@Post('ddd')
@UseInterceptors(AnyFilesInterceptor({
    dest: 'uploads'
}))
uploadAnyFiles(@UploadedFiles() files: Array<Express.Multer.File>, @Body() body) {
    console.log('body', body);
    console.log('files', files);
}

前端代码：

async function formData4() {
  const data = new FormData()
  data.set('name', 'Yun')
  data.set('age', 20)
  data.set('aaa', fileInput.files[0])
  data.set('bbb', fileInput.files[1])
  data.set('ccc', fileInput.files[2])
  data.set('ddd', fileInput.files[3])

  const res = await axios.post('http://localhost:3000/ddd', data)
  console.log(res)
}

同样识别出了所有 file 字段：

这就是 Nest 上传文件的方式。

自定义存储

import * as multer from 'multer';
import * as fs from 'fs';
import * as path from 'path';

const storage = multer.diskStorage({
  // 自定义目录
  destination: function (req, file, cb) {
    try {
      fs.mkdirSync(path.join(process.cwd(), 'my-uploads'));
    } catch (e) {}

    cb(null, path.join(process.cwd(), 'my-uploads'));
  },
  // 自定义文件
  filename: function (req, file, cb) {
    const uniqueSuffix =
      Date.now() +
      '-' +
      Math.round(Math.random() * 1e9) +
      '-' +
      file.originalname;
    cb(null, file.fieldname + '-' + uniqueSuffix);
  },
});

export { storage };

然后在 controller 使用这个 storage：

其实 Nest 上传文件的方式就是对 multer 做了一层简单的封装。

文件校验

此外我们还可能对上传文件的大小，类型做限制。这部分可以放在 pipe 做。

我们生成一个 pipe：

nest g pipe file-size-validation-pipe --no-spec --flat

添加检查文件大小的逻辑，大于 10k 就抛出异常，返回 400 的响应：

import {
  PipeTransform,
  Injectable,
  ArgumentMetadata,
  HttpException,
  HttpStatus,
} from '@nestjs/common';

@Injectable()
export class FileSizeValidationPipe implements PipeTransform {
  transform(value: Express.Multer.File, metadata: ArgumentMetadata) {
    if (value.size > 10 * 1024) {
      throw new HttpException('文件大于 10k', HttpStatus.BAD_REQUEST);
    }
    return value;
  }
}

加到 UploadedFile 的参数里：

当上传一个图片大于 10k 的时候：

但像文件大小、类型的校验这种常见的逻辑，Nest 内置了：

@Post('fff')
@UseInterceptors(FileInterceptor('aaa', {
    dest: 'uploads'
}))
uploadFile3(@UploadedFile(new ParseFilePipe({
    validators: [
      new MaxFileSizeValidator({ maxSize: 1000 }),
      new FileTypeValidator({ fileType: 'image/jpeg' }),
    ],
})) file: Express.Multer.File, @Body() body) {
    console.log('body', body);
    console.log('file', file);
}

MaxFileSizeValidator 是校验文件大小、FileTypeValidator 是校验文件类型。

返回的也是 400 响应，并且 message 说明了具体的错误信息。

而且这个错误信息 message 可以通过 exceptionFactory 工厂函数自定义。

我们也可以自己实现这样的 validator，只要继承 FileValidator 就可以：

import { FileValidator } from '@nestjs/common';

export class MyFileValidator extends FileValidator {
  constructor(options) {
    super(options);
  }

  isValid(file: Express.Multer.File): boolean | Promise<boolean> {
    if (file.size > 10000) {
      return false;
    }
    return true;
  }
  buildErrorMessage(file: Express.Multer.File): string {
    return `文件 ${file.originalname} 大小超出 10k`;
  }
}

然后在 controller 用一下：

浏览器上传文件：

可以看到我们自定义的 FileValidator 生效了。

最后注意限制文件大小，大小超过之后文件最终还是会上传到服务器，因为文件写入才能拿到相关信息，我们可以根据路径来删除不合规的文件。

以上就是Nest.js使用multer实现文件上传功能的详细内容，更多关于Nest.js multer文件上传的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • socket.io学习教程之深入学习篇（三）

    socket.io学习教程之深入学习篇（三）

    这篇文章更加深入的给大家介绍了socket.io的相关资料，之前已经介绍了socket.io的基本教程和应用，本文更为深入的来介绍下socket.io的使用，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-04-04
  • 一文带你了解Node.js进程管理工具PM2

    一文带你了解Node.js进程管理工具PM2

    Node.js进程管理工具PM2是一个开源的工具，用于管理和监控Node.js应用程序的运行，它可以帮助您方便地启动、停止、重启和监视多个Node.js进程，并提供了许多有用的功能，所以本文就和大家一起了解一下PM2,需要的朋友可以参考下
    2023-07-07
  • win7下安装配置node.js+express开发环境

    win7下安装配置node.js+express开发环境

    windows7下安装nodejs及框架express,从诞生至今一直被热捧,笔者最近也装了个环境打算了解一下。安装步骤简单比较简单,这里分享给大家，希望大家能够喜欢。
    2015-12-12
  • Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)

    Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)

    这篇文章主要介绍了Nodejs使用archiver-zip-encrypted库加密压缩文件时报错,朋友朋友在测试过程中都出现过异常，下面小编把问题过程分析脚本之家平台，需要的朋友可以参考下
    2019-11-11
  • 用Node提供静态文件服务的方法

    用Node提供静态文件服务的方法

    这篇文章主要介绍了用Node提供静态文件服务的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解如何让Express支持async/await

    详解如何让Express支持async/await

    本篇文章主要介绍了详解如何让Express支持async/await，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • nodejs处理图片的几种方法总结(使用sharp、jimp及webconvert)

    nodejs处理图片的几种方法总结(使用sharp、jimp及webconvert)

    这篇文章主要给大家介绍了关于nodejs处理图片的几种方法,文中介绍的方法分别是sharp、jimp及webconvert,在开发过程中我们有时候需要对图片进行处理,给一个图片添加水印、多个图片合成为一图片等操作,需要的朋友可以参考下
    2023-12-12
  • nodejs中使用worker_threads来创建新的线程的方法

    nodejs中使用worker_threads来创建新的线程的方法

    这篇文章主要介绍了nodejs中使用worker_threads来创建新的线程的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-01
  • Node.js中Express框架使用axios同步请求(async+await)实现方法

    Node.js中Express框架使用axios同步请求(async+await)实现方法

    这篇文章主要介绍了Node.js中Express框架使用axios同步请求(async+await)实现方法,结合实例形式分析了express框架使用异步交互axios模块实现同步请求的相关操作技巧与注意事项,需要的朋友可以参考下
    2023-04-04
  • Node.js实用代码段之正确拼接Buffer

    Node.js实用代码段之正确拼接Buffer

    这篇文章主要介绍了Node.js实用代码段之正确拼接Buffer,通过实例代码分享如何正确拼接Buffer，感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论