nestjs 全栈进阶--文件上传

nest new upload -p pnpm
pnpm i multer
pnpm i -D @types/multer

允许跨域

1. 单文件上传

我们去新增一个用于上传的handler

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

使用 FileInterceptor 来获取前端给的 file 字段,然后通过 UploadedFile 装饰器把它作为参数注入,dest是指定图片的存放目录的,当我们执行pnpm run start:dev时,你会发现它给我们自动的创建了一个uploads的文件夹

现在我们去快速写个前端页面,用于上传

<!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@1.6.8/dist/axios.min.js"></script></head><body><input id="fileInput" type="file" /><script>const fileInput = document.querySelector('#fileInput');async function formData() {const data = new FormData();// body字段data.set('name','xt');data.set('age', 18);// 对应后端提取的file字段data.set('file', fileInput.files[0]);const res = await axios.post('http://localhost:3000/upload', data);console.log(res);}fileInput.onchange = formData;</script></body>
</html>

鼠标右键选择这个,在默认浏览器打开,注意:这个功能需要安装vscode插件--》

然后选择文件,上传就好

可以看到,打印了 file 对象,并且文件也保存到了 uploads 目录

2. 多文件上传

我们新写个handler

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

单文件用的是:FileInterceptor,多文件用的是FilesInterceptor,多了一个s

单文件用的是:UploadedFile,多文件用的是UploadedFiles,也多了一个s

这个3,表示最大数量

然后我们改一下前端代码

<input id="fileInput" type="file" multiple />async function formData() {const data = new FormData();data.set('name','xt');data.set('age', 18);[...fileInput.files].forEach(item => {data.append('files', item)})const res = await axios.post('http://localhost:3000/uploads', data);
}

然后我们选择两个文件在上传

3. AnyFilesInterceptor

上面我们不管是单文件,还是多文件,我们都指定获取了一个file字段,那万一我们不知道这个字段是什么呢?这个时候我们就可以使用AnyFilesInterceptor

前端我们修改下请求路径,我们再去试试上传

4. 全局设置路径及处理文件名

刚刚我们都是在路由上指定文件存储位置的,现在我们来试试全局指定

我们再去写个handler试试,

我们在修改下前端的请求路径

我们在上传个文件

5. 预览上传的图片

不知大家还记不记得我们之前讲过的useStaticAssets,它让 nest 服务支持静态文件的访问。

  • useStaticAssets prefix 是虚拟前缀
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import {NestExpressApplication} from '@nestjs/platform-express'
import { join } from 'path';async function bootstrap() {const app = await NestFactory.create<NestExpressApplication>(AppModule);app.enableCors()app.useStaticAssets(join(__dirname, '../new-uploads'), {prefix: '/xt'});await app.listen(3000);
}
bootstrap();

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

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

相关文章

Git使用错误分析

一.fatal: Pathspec is in submodule 我做了这样的错误操作&#xff0c;在一个仓库下的一个子目录&#xff0c;执行了git init 创建了一个子仓库&#xff0c;然后想删掉这个子仓库&#xff0c;就只删除了该子目录下的.git文件夹&#xff0c;而没有删除缓存&#xff0c;执行如下…

Python | Leetcode Python题解之第328题奇偶链表

题目&#xff1a; 题解&#xff1a; class Solution:def oddEvenList(self, head: ListNode) -> ListNode:if not head:return headevenHead head.nextodd, even head, evenHeadwhile even and even.next:odd.next even.nextodd odd.nexteven.next odd.nexteven even…

UVM(3)TLM通信

基本定义 A的方框称之为PORT&#xff0c;B的圆圈称之为EXPORT 要注意&#xff1a;无论是get还是put操作&#xff0c; 其发起者拥有的都是PORT端口&#xff0c; 而不是EXPORT transport操作&#xff0c; 如 transport操作相当于一次put操作加一次get操作&#xff0c; 数据流先…

Spring统一功能处理:拦截器、响应与异常的统一管理

目录 一.拦截器 二.统一数据返回格式 三.统一异常处理 一.拦截器 拦截器是Spring框架提供的核⼼功能之⼀&#xff0c;主要⽤来拦截⽤⼾的请求&#xff0c;在指定⽅法前后&#xff0c;根据业务需要执⾏预先设定的代码。 也就是说&#xff0c;允许开发⼈员提前预定义⼀些逻辑…

c语言-文件

11 文件 目录 11 文件 一、文件系统 二、文件操作方式 1、基于缓冲区文件操作 2、基于非缓冲区文件操作 三、文件操作的常用函数 1、fopen 2、fclose 3、fputc 4、fgetc 5、rewind 6、fseek 7、fputs 8、fgets 9、fwrite 10、fread 11、fprintf 12、fscanf …

【Redis】数据结构篇

文章目录 键值对数据库是怎么实现的&#xff1f;动态字符串SDSC 语言字符串的缺陷SDS结构设计 整数集合整数集合结构设计整数集合的升级操作 哈希表哈希表结构设计哈希冲突链式哈希Rehash渐进式rehashrehash触发条件 压缩列表压缩列表结构设计连续更新压缩列表的缺陷 quicklist…

【Material-UI】Checkbox组件:Indeterminate状态详解

文章目录 一、什么是Indeterminate状态&#xff1f;二、Indeterminate状态的实现1. 基本用法示例2. 代码解析3. Indeterminate状态的应用场景 三、Indeterminate状态的UI与可访问性1. 无障碍设计2. 用户体验优化 四、Indeterminate状态的最佳实践1. 状态同步2. 优化性能3. 提供…

ubuntu20.04 环境搭建教程

1&#xff1a; Ubuntu 版本说明 我使用版本为 ubuntu20.04 ->镜像文件网上下载最新版本 mirrors.huaweicloud.com/ubuntu-releases/20.04.6/ Ubuntu 其他说明 Ubuntu 安装的位置不建议放到 C 盘(除非你只有一个 C 盘) Ubuntu 需要 120G 的空间 2&#xff1…

vue项目前端实现将table导出成excel功能2

使用插件 xlsx、xlsx-style、file-saver 具体引入见文章&#xff1a;vue项目前端实现将table导出成excel功能1 方法一 exportExcelByData&#xff1a;将数据导出成excel&#xff0c;合并单元格需要另外设置 方法二 exportExcelByDom&#xff1a;将页面dom(el-table)导出成…

媒体资讯视频数据采集-yt-dlp-python实际使用-下载视频

对于视频二创等一些业务场景&#xff0c;可能要采集youtube等的相关媒体视频资源&#xff0c;使用[yt-dlp](https://github.com/yt-dlp/yt-dlp)是一个不错的选择&#xff0c;提供的命令比较丰富&#xff0c;场景比较全面yt-dlp 是一个用 Python 编写的命令行工具&#xff0c;主…

Linux部署python3.0版本——及基本操作

&#xff08;一&#xff09;部署环境 首先查看列表&#xff0c;找到python3.0的包 yum list installed|grep python 如果没有&#xff0c;是因为yum源的问题&#xff0c;可部署阿里云镜像然后下载epel包&#xff0c;这里的内容可参考前面的阿里云镜像部署 然后进行下载 yum…

React 用户点击某个元素后只执行一次操作

React开发中经常会遇到需求&#xff1a;用户点击某个元素后只执行一次特定操作。比如&#xff0c;用户点击按钮后弹出提示框&#xff0c;但希望再次点击按钮不再触发提示框。针对这种需求&#xff0c;可以封装一个自定义Hooks来实现只允许点击一次的功能。 import {useCallbac…

Mysql,用户名重复,无法调用问题

问题描述&#xff1a; 我电脑的数据库用户名是&#xff0c;root。 因为经常需要帮别人封装程序&#xff0c;所以需要在我本机跑通别人的程序。有的程序里面也涉及到数据库&#xff0c;用户名也是&#xff0c;root&#xff0c;但是密码与我本机的不同。 之前我会修改我用户名…

MySQL —— 表的设计

表的设计 在设计表之前&#xff0c;我们需要从需求中获得实体&#xff08;实体就是一张张表&#xff09;&#xff0c;实体的属性就是表中的字段&#xff08;列&#xff09;&#xff0c;然后确定实体与实体之间的关系&#xff0c;最后使用 SQL 语句去创建具体的表 在设计表的时…

Unity Console 窗口输出对齐

起因&#xff1a;做了个工具在console窗口罗列一些信息&#xff0c;基本结构是 [ 文件名 &#xff1a;行号 ]&#xff0c;因为文件&#xff0c;行号长度不一&#xff0c;想要做到如下效果。 初步尝试&#xff0c;用以下方法&#xff1a; string format "{0,-10} …

python自动化笔记:配置文件.ini及yml文件

目录 一、.ini配置文件1.1、ini编写格式1.2、读取.ini配置文件的数据1.3、编辑&#xff1a;写入和删除&#xff08;了解即可&#xff09; 二、yaml文件2.1、yaml编写语法规则2.2、yaml三种数据结构2.3、yaml文件的读取和写入 一、.ini配置文件 后缀名.ini 用于存储项目全局配置…

[独家原创] CPO-RBF多特征分类预测 优化宽度+中心值+连接权值 (多输入单输出)Matlab代码

[独家原创] CPO-RBF多特征分类预测 优化宽度中心值连接权值 &#xff08;多输入单输出&#xff09;Matlab代码 目录 [独家原创] CPO-RBF多特征分类预测 优化宽度中心值连接权值 &#xff08;多输入单输出&#xff09;Matlab代码效果一览基本介绍程序设计参考资料 效果一览 基本…

java学习day016

API 1.Number 数字格式化 : # 任意数字&#xff0c;0-9任意单个数字 , 千分位 . 小数点 0 补位 //四位小数 DecimalFormat df new DecimalFormat("###,###.####"); System.out.println(df.format(1234567.312));//1,234,567.312 //四位小数,不够补0 df new Deci…

前缀和处理数组区间之和问题

1.什么是区间和问题 “区间和问题”通常指的是涉及计算或处理数组或数列某个子区间&#xff08;即一段连续元素&#xff09;的总和的类型问题。这类问题可能有多种变体和不同的复杂度&#xff0c;但基本思想都是在给定的区间内快速计算总和或处理与区间和相关的操作。 2.例题…

常见的框架漏洞

ThinkPHP 首先我们打开一个环境 然后进行远程命令执行代码 然后进行远程代码执行 ?sindex/think\app/invokefunction&functioncall_user_func_array&vars[0]phpinfo&vars[1][]-1 在网页中输出phpinfo getshell ?sindex/think\app/invokefunction&function…