第十九章 Nest multer 文件上传

上章我们了解了Express multer 文件上传的相关操作 本章将了解Nest中的文件上传。用 multer 包处理 multipart/form-data 类型的请求中的 file

新建个 nest 项目:

nest new nest-multer-upload 

1719665836394.png
安装 multer 的 ts 类型的包:

npm install -D @types/multer

1719667026173.png

1、单文件上传

接着创建一个接口,用于文件上传 下面的test1接口就是用于文件上传

import { Body, Controller, Get, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { AppService } from './app.service';
import { FileInterceptor } from '@nestjs/platform-express';@Controller()
export class AppController {constructor(private readonly appService: AppService) { }@Get()getHello(): string {return this.appService.getHello();}@Post('test1')@UseInterceptors(FileInterceptor('file', {dest: 'uploads',}))uploadFile(@UploadedFile() file: Express.Multer.File, @Body() body: any) {console.log('body', body);console.log('file', file);}
}

使用 FileInterceptor 来提取 file 字段,然后通过 UploadedFile 装饰器把它作为参数传入
接着运行项目可以看到我们的项目根目录下创建了一个uploads名称的文件夹
1719668539032.png
在nestjs项目中设置支持跨域
修改main.ts:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';async function bootstrap() {const app = await NestFactory.create(AppModule, {cors: true});await app.listen(3000);
}
bootstrap();

接着 我们来编写前端的代码,创建index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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', '测试');data.set('age', 36);data.set('file', fileInput.files[0]);const res = await axios.post('http://localhost:3000/test1', data);console.log(res);}fileInput.onchange = formData;</script>
</body></html>

运行前端:

npx http-server

1719717782702.png
浏览器访问:
1719718137459.png
上传文件之后可以看控制台看到打印了上传的file 对象 和body数据,文件也保存到了 uploads 目录下
1719718212331.png

2、多文件上传

增加test2接口 注意哦 FilesInterceptor UploadedFiles 是加了s的 和之前的单文件上传不一样

@Post('test2')@UseInterceptors(FilesInterceptor('files', 3, {dest: 'uploads',}))uploadFiles(@UploadedFiles() files: Express.Multer.File[], @Body() body: any) {console.log('body', body);console.log('files', files);}

接着我们在前端代码新增一个函数 formData2:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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', '测试');data.set('age', 36);data.set('file', fileInput.files[0]);const res = await axios.post('http://localhost:3000/test1', data);console.log(res);}async function formData2() {const data = new FormData();data.set('name', '测试');data.set('age', 36);[...fileInput.files].forEach(item => {data.append('file', item);})const res = await axios.post('http://localhost:3000/test2', data, {Headers: { 'content-type': 'multipart/form-data' }});console.log(res);}fileInput.onchange = formData2;</script>
</body></html>

重新运行前端:

npx http-server

接着上传多个文件之后 可以看到控制台打印了 files 文件数组
1719719733484.png

3、多字段上传

接下来我们测试一下多字段上传
新增加 test3接口 使用 FileFieldsInterceptor UploadedFiles

import { Body, Controller, Get, Post, UploadedFile, UploadedFiles, UseInterceptors } from '@nestjs/common';
import { AppService } from './app.service';
import { FileFieldsInterceptor, FileInterceptor, FilesInterceptor } from '@nestjs/platform-express';@Controller()
export class AppController {constructor(private readonly appService: AppService) { }@Get()getHello(): string {return this.appService.getHello();}@Post('test1')@UseInterceptors(FileInterceptor('file', {dest: 'uploads',}))uploadFile(@UploadedFile() file: Express.Multer.File, @Body() body: any) {console.log('body', body);console.log('file', file);}@Post('test2')@UseInterceptors(FilesInterceptor('files', 3, {dest: 'uploads',}))uploadFiles(@UploadedFiles() files: Express.Multer.File[], @Body() body: any) {console.log('body', body);console.log('files', files);}@Post('test3')@UseInterceptors(FileFieldsInterceptor([{ name: 'a', maxCount: 2 },{ name: 'b', maxCount: 3 },]))uploadFileFields(@UploadedFiles() files: { aaa?: Express.Multer.File[], bbb?: Express.Multer.File[] }, @Body() body) {console.log('body', body);console.log('files', files);}
}

修改前端代码 增加 formData3 实现上传4个文件 前两个文件上传的时候在a字段 后两个文件上传的时候在b字段实现上传:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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', '测试');data.set('age', 36);data.set('file', fileInput.files[0]);const res = await axios.post('http://localhost:3000/test1', data);console.log(res);}async function formData2() {const data = new FormData();data.set('name', '测试');data.set('age', 36);[...fileInput.files].forEach(item => {data.append('files', item);})const res = await axios.post('http://localhost:3000/test2', data, {Headers: { 'content-type': 'multipart/form-data' }});console.log(res);}async function formData3() {const data = new FormData();data.set('name', '测试');data.set('age', 36);data.append('a', fileInput.files[0])data.append('a', fileInput.files[1])data.append('b', fileInput.files[2])data.append('b', fileInput.files[3])const res = await axios.post('http://localhost:3000/test3', data);console.log(res);}fileInput.onchange = formData3;</script>
</body></html>

重新运行前端:

npx http-server

接着打开 http://127.0.0.1:8080/ 上传4个文件
1719723208742.png
可以看到 a 字段收到了2个文件 b字段收到了2个文件

4、任意字段上传

如果我们不知道有哪些字段是上传的 可以使用AnyFilesInterceptor,新建接口test4:

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

修改前端代码 增加 formData4 函数:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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', '测试');data.set('age', 36);data.set('file', fileInput.files[0]);const res = await axios.post('http://localhost:3000/test1', data);console.log(res);}async function formData2() {const data = new FormData();data.set('name', '测试');data.set('age', 36);[...fileInput.files].forEach(item => {data.append('files', item);})const res = await axios.post('http://localhost:3000/test2', data, {Headers: { 'content-type': 'multipart/form-data' }});console.log(res);}async function formData3() {const data = new FormData();data.set('name', '测试');data.set('age', 36);data.append('a', fileInput.files[0])data.append('a', fileInput.files[1])data.append('b', fileInput.files[2])data.append('b', fileInput.files[3])const res = await axios.post('http://localhost:3000/test3', data);console.log(res);}async function formData4() {const data = new FormData();data.set('name', '测试');data.set('age', 36);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/test4', data);console.log(res);}fileInput.onchange = formData4;</script>
</body></html>

重新运行前端:

npx http-server

接着打开 http://127.0.0.1:8080/ 上传4个文件 可以看到识别了所有字段
1719724483848.png
同时也可以指定storage,转换上传的文件名称 创建 storage.ts

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.originalnamecb(null, file.fieldname + '-' + uniqueSuffix)}
});export { storage };

修改之前的test4接口:

import { Body, Controller, Get, Post, UploadedFile, UploadedFiles, UseInterceptors } from '@nestjs/common';
import { AppService } from './app.service';
import { AnyFilesInterceptor, FileFieldsInterceptor, FileInterceptor, FilesInterceptor } from '@nestjs/platform-express';
import { storage } from './storage ';@Controller()
export class AppController {constructor(private readonly appService: AppService) { }@Get()getHello(): string {return this.appService.getHello();}@Post('test1')@UseInterceptors(FileInterceptor('file', {dest: 'uploads',}))uploadFile(@UploadedFile() file: Express.Multer.File, @Body() body: any) {console.log('body', body);console.log('file', file);}@Post('test2')@UseInterceptors(FilesInterceptor('files', 3, {dest: 'uploads',}))uploadFiles(@UploadedFiles() files: Express.Multer.File[], @Body() body: any) {console.log('body', body);console.log('files', files);}@Post('test3')@UseInterceptors(FileFieldsInterceptor([{ name: 'a', maxCount: 2 },{ name: 'b', maxCount: 3 },]))uploadFileFields(@UploadedFiles() files: { aaa?: Express.Multer.File[], bbb?: Express.Multer.File[] }, @Body() body) {console.log('body', body);console.log('files', files);}@Post('test4')@UseInterceptors(AnyFilesInterceptor({dest: 'uploads',storage: storage}))uploadAnyFiles(@UploadedFiles() files: Array<Express.Multer.File>, @Body() body) {console.log('body', body);console.log('files', files);}}

再次打开游览器 http://127.0.0.1:8080/ 上传4个文件
1719730782749.png

5、文件上传限制

接下来我们对上传的文件进行显示 文件大小、类型等,这部分我们在pipe里实现

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

1719730968608.png
修改ize-validation-pipe.pipe.ts 设置文件要小于20kb

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 > 20 * 1024) {throw new HttpException('文件大于 20k', HttpStatus.BAD_REQUEST);}return value;}
}

添加到接口里 FileSizeValidationPipe:

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

接着把前端代码修改一下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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', '测试');data.set('age', 36);data.set('file', fileInput.files[0]);const res = await axios.post('http://localhost:3000/test1', data);console.log(res);}async function formData2() {const data = new FormData();data.set('name', '测试');data.set('age', 36);[...fileInput.files].forEach(item => {data.append('files', item);})const res = await axios.post('http://localhost:3000/test2', data, {Headers: { 'content-type': 'multipart/form-data' }});console.log(res);}async function formData3() {const data = new FormData();data.set('name', '测试');data.set('age', 36);data.append('a', fileInput.files[0])data.append('a', fileInput.files[1])data.append('b', fileInput.files[2])data.append('b', fileInput.files[3])const res = await axios.post('http://localhost:3000/test3', data);console.log(res);}async function formData4() {const data = new FormData();data.set('name', '测试');data.set('age', 36);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/test4', data);console.log(res);}fileInput.onchange = formData;</script>
</body></html>

重新运行前端: 上传文件一张大于20kb的图片或文件

npx http-server

可以发现接口报错 这样就可以实现文件的校验
1719731591999.png
其实 Nest 内置了文件大小、类型的校验 接下来我们测试一下:
修改test1接口 使用Nest 内置的 ParseFilePipe,它的作用是调用传入的 validator 来对文件做校验。
比如 MaxFileSizeValidator 是校验文件大小、FileTypeValidator 是校验文件类型。

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

接下来我们再上传文件测试一下 可以看到返回了400和具体错误信息
1719731967044.png
接下来我们自定义一下返回的错误信息: 使用 exceptionFactory 自定义错误信息

@Post('test1')@UseInterceptors(FileInterceptor('file', {dest: 'uploads',}))uploadFile(@UploadedFile(new ParseFilePipe({validators: [new MaxFileSizeValidator({ maxSize: 1000 }),new FileTypeValidator({ fileType: 'image/jpeg' })],exceptionFactory(error) {throw new HttpException('测试' + error, 400);},})) file: Express.Multer.File, @Body() body: any) {console.log('body', body);console.log('file', file);}

再次上传可以看到返回了自定义的错误信息
1719732165228.png
我们也可以自己实现Validator
创建 my-file-validator.ts

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`;}
}

修改接口使用自定义的validator:

@Post('test1')@UseInterceptors(FileInterceptor('file', {dest: 'uploads',}))uploadFile(@UploadedFile(new ParseFilePipe({validators: [new MyFileValidator({}),],exceptionFactory(error) {throw new HttpException('测试' + error, 400);},})) file: Express.Multer.File, @Body() body: any) {console.log('body', body);console.log('file', file);}

上传文件:
1719732568683.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/870332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux C语言基础 day7

目录 思维导图&#xff1a; 学习目标&#xff1a; 学习内容&#xff1a; 1. 数组 1.1 对数组元素的常规操作 1.1.1 逆序 1.1.2 挑选数据 1.1.3 排序 1. 冒泡排序 2. 选择排序 2. 二维数组 2.1 二维数组的概念 2.1.1. 定义格式 2.2.2.初始化 2.2 二维数组的相关操…

2.4G芯片开发的遥控玩具方案介绍 东莞酷得

玩具从早期的简单功能&#xff0c;到现如今各种各样的智能操作&#xff0c;发展的速度也是飞速的。随着玩具市场的逐步完善与推进&#xff0c;中国的智能玩具市场也出现了很多远程遥控玩具。遥控玩具也是从最初的有线到现在的无线&#xff0c;从地上跑的到天上飞的&#xff0c;…

Wireshark 对 https 请求抓包并展示为明文

文章目录 1、目标2、环境准备3、Wireshark 基本使用4、操作步骤4.1、彻底关闭 Chrome 进程4.2、配置 SSLKEYLOGFILE [核心步骤]4.3、把文件路径配置到 Wireshark 指定位置4.4、在浏览器发起请求4.5、抓包配置4.6、过滤4.6.1、过滤域名 http.host contains "baidu.com4.6.2…

UNI_App平台调试指南 debug(十五)

App平台调试指南 debug 常规开发里,在 HBuilderX 的运行菜单里运行 App,手机端的错误或 console.log 日志信息会直接打印到控制台。 如果需要更多功能,比如审查元素、打断点 debug,则需要启动调试模式。自 HBuilderX 2.0.3+ 版本起开始支持 App 端的调试。 #打开调试窗口…

响应式建站公司企业官网源码系统 带源代码以及搭建部署教程

系统概述 响应式建站公司企业官网源码系统是一套集设计、开发、部署于一体的综合性解决方案。它旨在为企业提供一个易于定制、功能强大、适应各种设备屏幕的官方网站平台。 该系统采用先进的技术架构&#xff0c;确保网站的稳定性和性能。它能够与各种后端数据库和服务器环境…

TCP四次挥手:为什么四次?原理大揭密!

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! Hello, 大家好,我是你们的技术小伙伴小米!今天我们来聊一聊网络基础中的一个重要环节——TCP四次挥手过程。大家都知道,TCP连接的建立和断开是网络通…

2024年10款免费的项目管理软件推荐

本文向大家推荐10款2024年免费使用的项目管理软件&#xff0c;其中包括桌面应用和基于Web平台的多种产品&#xff0c;同时还涵盖了一些优秀的开源软件。 1.禅道开源项目管理软件 禅道是一款开源的、基于Web的项目管理软件&#xff0c;其功能丰富且操作简便&#xff0c;为团队提…

孟加拉最受欢迎的slot游戏推广okspin海外网盟广告优势

孟加拉最受欢迎的slot游戏推广okspin海外网盟广告优势 在当今全球化日益加剧的时代&#xff0c;游戏产业正迎来前所未有的发展机遇。孟加拉国&#xff0c;作为一个充满活力和潜力的新兴市场&#xff0c;其游戏出海之路也愈发受到业界的关注。在这一过程中&#xff0c;广告投放…

C++入门——命名空间与输入输出与缺省参数与重载函数与引用与内联

文章目录 命名空间——namespace命名空间的用处命名空间的定义命名空间的使用命名空间的嵌套命名空间的别名 输入与输出原理概述输入输出的使用 缺省参数定义缺省参数的方式使用缺省参数的价值和优势 函数重载定义与使用价值与优势 引用定义与使用价值与优势注意事项常量引用函…

【TOOLS】Chrome扩展开发

Chrome Extension Development 1. 入门教程 入门案例&#xff0c;可以访问【 谷歌插件官网官方文档 】查看官方入门教程&#xff0c;这里主要讲解大概步骤 Chrome Extenson 没有固定的脚手架&#xff0c;所以项目的搭建需要根据开发者自己根据需求搭建项目&#xff08;例如通过…

生物素-十一聚乙二醇-沙利度胺;Biotin-PEG11-Thalidomide

Biotin-PEG11-Thalidomide&#xff0c;即生物素-十一聚乙二醇-沙利度胺&#xff0c;是一种结合了生物素、十一聚乙二醇&#xff08;PEG11&#xff09;和沙利度胺的复杂化合物。以下是对该化合物的详细分析&#xff1a; 一、组成成分及特性 生物素&#xff08;Biotin&#xff09…

美间·AI创意商拍——面向全球电商从业者提供AI背景图、AI真实增强、AI智能抠图、AI扩图、AI智能消除等AI生成及设计工具

一、产品介绍 「美间AI创意商拍」是群核科技推出的电商AIGC设计平台&#xff0c;依托群核前沿技术研究院自研大模型和美间2D智能设计引擎&#xff0c;面向全球电商从业者提供AI背景图、AI真实增强、AI智能抠图、AI扩图、AI智能消除等AI生成及设计工具&#xff0c;帮助用户高效…

【全面介绍语言模型的原理,实战和评估】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步! 🥂语言模型的原理 🥂语言模型基于统计和机器学习的原理,目标…

怎么批量下载网页里的图片和视频 如何批量下载一个网站的所有图片 如何批量下载网页视频文件 idm软件怎么下载

当我们在网站内需要下载大量图片时&#xff0c;一张一张的下载非常麻烦。这里推荐大家使用IDM这款网页图片下载工具。下面&#xff0c;我将介绍怎么批量下载网页里的图片和视频&#xff0c;如何批量下载一个网站的所有图片的解决方法。 一、怎么批量下载网页里的图片和视频 …

营业执照注销多少钱

营业执照不注销会有什么后果&#xff1f;1、公司不经营&#xff0c;放几年自动注销&#xff1f;真相&#xff1a;不管放多长时间&#xff0c;公司是不会自动注销的。相反&#xff0c;放任长久不维护&#xff0c;公司会出现异常&#xff0c;营业执照被吊销&#xff0c;公司股东、…

uniapp小程序上传文件webapi后端项目asp.net

需求 小程序需要上传用户相册图片或拍摄的照片到后端服务器 uniapp官方处理小程序文件方法 选择文件方法&#xff1a;uni.chooseMedia uni-app官网uni-app,uniCloud,serverless,uni.chooseVideo(OBJECT),chooseVideo HarmonyOS 兼容性,uni.chooseMedia(OBJECT),uni.saveVid…

软件架构之计算机网络

软件架构之计算机网络 第 4 章 计算机网络4.1 网络架构与协议4.1.1 网络互联模型4.1.2 常见的网络协议4.1.3 IPv6 4.2 局域网与广域网4.2.2 无线局域网4.2.3 广域网技术4.2.4 网络接入技术 4.3 网络互连与常用设备4.4 网络工程4.4.1 网络规划4.4.2 网络设计4.4.3 网络实施 4.5 …

PTrade常见问题系列8

get_fundamentals函数能否在后台验证是否能取到数据 get_fundamentals函数能否在量化服务器后台调用&#xff0c;验证是否能取到财务数据&#xff1f; 可后台调用。 #获取财务数据 from fly.data.quotation import get_fundamentals get_fundamentals(600000.SS, balance_stat…

【ChatGPT 消费者偏好】第二弹:ChatGPT在日常生活中的使用—推文分享—2024-07-10

今天的推文主题还是【ChatGPT & 消费者偏好】 第一篇&#xff1a;哪些动机因素和技术特征的组合能够导致ChatGPT用户中高和低的持续使用意图。第二篇&#xff1a;用户对ChatGPT的互动性、性能期望、努力期望以及社会影响如何影响他们继续使用这些大型语言模型的意向&#x…

强烈推荐!!李沐老师《动手学深度学习》最新Pytorch版!

动手学深度学习(PyTorch版)》是由李沐、Aston Zhang和孔德威共同编写的教材&#xff0c;专为深度学习初学者和实践者设计。本书使用PyTorch作为主要的深度学习框架&#xff0c;全面系统地介绍了深度学习的基本理论、常见模型和实际应用技巧。 书中内容包括深度学习的基础知识、…