第十八章 Express multer 文件上传

本章将学习Express multer 文件上传 ，因为Nest 的文件上传是基于 Express 的中间件 multer 实现的，所以在学习 Nest 文件上传之前，我们先学习下 multer 包

首先先创建 multer-test 文件夹
执行下面代码 创建package.json

npm init -y

1719641865424.png
接着安装 express 和 multer 还有 cors 包：

npm install express multer cors

1719641931393.png
创建index.js 并修改：

const express = require('express')
const multer = require('multer')
const cors = require('cors');const app = express()
app.use(cors());const upload = multer({ dest: 'uploads/' })app.post('/aaa', upload.single('aaa'), function (req, res, next) {console.log('req.file', req.file);console.log('req.body', req.body);
})app.listen(5200);

app.use 使用中间件 cors 来处理跨域。
用 multer 处理文件上传，指定保存目录为 uploads/。
接着新建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" /><script>const fileInput = document.querySelector('#fileInput');async function formData() {const data = new FormData();data.set('name', '光');data.set('age', 20);data.set('aaa', fileInput.files[0]);const res = await axios.post('http://localhost:5200/aaa', data);console.log(res);}fileInput.onchange = formData;</script>
</body></html>

使用FormData + axios 上传文件，指定内容的传输格式 content-type 为 multipart/form-data。
用 node 把 server 跑起来，并且用 http-server 把静态服务跑起来
1719642173152.png
1719642250687.png
游览器访问 http://192.168.100.222:8080/1719642282216.png
接着点击选择文件 上传文件 看游览器的控制台 可以看到发送了请求 此时aaa 请求的 body 是多个 boundary 分隔的格式
1719645151005.png
分隔符是在 Content-Type 指定的
1719645308564.png
这是 form-data 的传输格式
接着我们在控制端可以看到服务端打印了信息
1719645361020.png
服务端多了 uploads 目录，下面就保存着我们上传的文件：
1719645383595.png

我们再实现多文件上传 修改index.js

const express = require('express')
const multer = require('multer')
const cors = require('cors');const app = express()
app.use(cors());const upload = multer({ dest: 'uploads/' })app.post('/aaa', upload.single('aaa'), function (req, res, next) {console.log('req.file', req.file);console.log('req.body', req.body);
})app.post('/bbb', upload.array('bbb',2), function (req, res, next) {console.log('req.files', req.files);console.log('req.body', req.body);
})app.listen(5200);

再次修改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 formData2() {const data = new FormData();data.set('name','光');data.set('age', 20);[...fileInput.files].forEach(item => {data.append('bbb', item)})const res = await axios.post('http://localhost:5200/bbb', data);console.log(res);}fileInput.onchange = formData2;</script>
</body>
</html>

input 标签添加 multiple 属性允许多选。
onchange 的时候取出每个 file，通过 append 方法添加到 bbb 字段
1719647069103.png
可以看到上传的是一个数组，并且 uploads 目录下也多了俩文件
1719647129551.png
接着我们在express 里添加错误中间件，一旦某个中间件出了错，express 就会向后找错误处理中间件来调用，如果没有，那就用默认错误处理中间件，返回 500 响应。

const express = require('express')
const multer = require('multer')
const cors = require('cors');const app = express()
app.use(cors());const upload = multer({ dest: 'uploads/' })app.post('/aaa', upload.single('aaa'), function (req, res, next) {console.log('req.file', req.file);console.log('req.body', req.body);
})app.post('/bbb', upload.array('bbb', 2), function (req, res, next) {console.log('req.files', req.files);console.log('req.body', req.body);
}, function (err, req, res, next) {console.log('err', err);
})app.listen(5200);

接着我们上传超过2个文件：
1719647409711.png
可以看到服务端显示了错误，我们再改造一下即可返回错误信息

const express = require('express')
const multer = require('multer')
const cors = require('cors');const { MulterError } = multer; const app = express()
app.use(cors());const upload = multer({ dest: 'uploads/' })app.post('/aaa', upload.single('aaa'), function (req, res, next) {console.log('req.file', req.file);console.log('req.body', req.body);
})app.post('/bbb', upload.array('bbb', 2), function (req, res, next) {console.log('req.files', req.files);console.log('req.body', req.body);
}, function(err, req, res, next) {if(err instanceof MulterError && err.code === 'LIMIT_UNEXPECTED_FILE') {res.status(400).end('Too many files uploaded');}
})app.listen(5200);

传超过 2 个文件，就会收到服务端的 400 的响应：
1719647746031.png

我们尝试多字段上传

const express = require('express')
const multer = require('multer')
const cors = require('cors');const { MulterError } = multer; const app = express()
app.use(cors());const upload = multer({ dest: 'uploads/' })app.post('/aaa', upload.single('aaa'), function (req, res, next) {console.log('req.file', req.file);console.log('req.body', req.body);
})app.post('/bbb', upload.array('bbb', 2), function (req, res, next) {console.log('req.files', req.files);console.log('req.body', req.body);
}, function(err, req, res, next) {if(err instanceof MulterError && err.code === 'LIMIT_UNEXPECTED_FILE') {res.status(400).end('Too many files uploaded');}
})app.post('/ccc', upload.fields([{ name: 'aaa', maxCount: 3 },{ name: 'bbb', maxCount: 2 }
]), function (req, res, next) {console.log('req.files', req.files);console.log('req.body', req.body);
})app.listen(5200);

通过 fields 方法指定每个字段的名字和最大数量，接收到请求后通过 req.files[‘xxx’] 来取对应的文件信息，其他非文件字段，同样是通过 req.body 来取
修改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 formData2() {const data = new FormData();data.set('name', '光');data.set('age', 20);[...fileInput.files].forEach(item => {data.append('bbb', item)})const res = await axios.post('http://localhost:5200/bbb', data);console.log(res);}async function formData3() {const data = new FormData();data.set('name', '光');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:5200/ccc', data);console.log(res);}fileInput.onchange = formData3;</script>
</body></html>

可以看到服务端上传了4个新的文件
1719648315461.png
1719648371187.png

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

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

相关文章

单例模式的简单理解

单例模式的简单理解

单例模式 前言一、单例模式是什么二、单例模式的使用饿汉模式单线程下的懒汉模式多线程下的懒汉模式&#xff08;优化懒汉模式&#xff09;加锁 三、总结 前言 设计模式是将一些经典的问题场景进行整合归纳&#xff0c;并提供一些解决方案&#xff0c;相当于一种“套路”。 熟…
阅读更多...
数据仓库介绍_维度表（三）

数据仓库介绍_维度表（三）

维度表概述 维度表是维度建模的基础和灵魂。前文提到&#xff0c;事实表紧紧围绕业务过程进行设计&#xff0c;而维度表则围绕业务过程所处的环境进行设计。维度表主要包含一个主键和各种维度字段&#xff0c;维度字段称为维度属性。 表设计步骤 确定维度&#xff08;表&…
阅读更多...
SQL 针对上面的salaries表emp_no字段创建索引idx_emp_no

SQL 针对上面的salaries表emp_no字段创建索引idx_emp_no

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 描述 针对salaries…
阅读更多...
【开源合规】开源许可证风险场景详细解读

【开源合规】开源许可证风险场景详细解读

文章目录 前言关于BlackDuck许可证风险对比图弱互惠型许可证举个例子具体示例LGPL系列LGPL-2.0-onlyLGPL-2.0-or-laterLGPL-2.1-onlyLGPL-2.1-or-laterLGPL-3.0-onlyLGPL-3.0-or-laterMPL系列MPL-1.0MPL-1.1MPL-2.0EPL系列EPL-1.0EPL-2.0互惠型许可证GPL系列GPL-1.0GPL-2.0GPL-…
阅读更多...
3.相机标定原理及代码实现（opencv）

3.相机标定原理及代码实现（opencv）

1.相机标定原理 相机参数的确定过程就叫做相机标定。 1.1 四大坐标系及关系 &#xff08;1&#xff09;像素坐标系&#xff08;单位&#xff1a;像素&#xff08;pixel&#xff09;&#xff09; 像素坐标系是指相机拍到的图片的坐标系&#xff0c;以图片的左上角为坐标原点&a…
阅读更多...
合合信息大模型加速器亮相WAIC大会：文档解析与文本识别新突破

合合信息大模型加速器亮相WAIC大会：文档解析与文本识别新突破

合合信息大模型加速器亮相WAIC大会&#xff1a;文档解析与文本识别新突破 文章目录 合合信息大模型加速器亮相WAIC大会&#xff1a;文档解析与文本识别新突破前言合合信息TextIn平台&#xff1a;智能文档处理的领军者文档解析引擎&#xff1a;百页文档秒级处理大模型的发展背景…
阅读更多...
【机器学习】独立成分分析（ICA）：解锁信号的隐秘面纱

【机器学习】独立成分分析（ICA）：解锁信号的隐秘面纱

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 独立成分分析&#xff08;ICA&#xff09;&#xff1a;解锁信号的隐秘面纱引言I…
阅读更多...
若依 ruoyi-vue SpringBoot highlight-textarea 输入框敏感词关键词高亮标红（二）

若依 ruoyi-vue SpringBoot highlight-textarea 输入框敏感词关键词高亮标红（二）

参考文章&#xff0c;非常感谢大佬的分享 实现可高亮的输入框 — HighlightTextarea GitHub:highlight-textarea 可看作者上一篇文章 若依 ruoyi-vue SpringBoot聊天敏感词过滤sensitive-word&#xff08;一&#xff09; 效果图 审核时&#xff0c;输入框高亮敏感词&#xff…
阅读更多...
vue3 + tsx 表格 Action 单独封装组件用法

vue3 + tsx 表格 Action 单独封装组件用法

前言 先上图看右侧列 action 的 UI 效果&#xff1a; 正常来说&#xff0c;如果一个表格的附带 action 操作&#xff0c;我们一般会放在最右侧的列里面实现&#xff0c;这个时候有些UI 框架支持在 SFC 模板里面定义额外的 solt&#xff0c;当然如果不支持&#xff0c;更通用的…
阅读更多...
LabVIEW实现LED显示屏视觉检测

LabVIEW实现LED显示屏视觉检测

为了满足LED显示屏在生产过程中的严格质量检测需求&#xff0c;引入自动化检测系统是十分必要的。传统人工检测方式存在检测强度高、效率低、准确性差等问题&#xff0c;自动化检测系统则能显著提高检测效率和准确性。视觉检测系统的构建主要包含硬件和软件两个部分。 视觉系统…
阅读更多...
新兴市场游戏产业爆发 传音以技术抢抓机遇 ​

新兴市场游戏产业爆发 传音以技术抢抓机遇 ​

随着年轻人口的增加以及互联网的普及,非洲、中东等新兴市场正迎来游戏产业的大爆发,吸引着全球游戏企业玩家在此开疆辟土。中国出海企业代表传音以新兴市场需求为中心,秉持本地化创新理念不断加强游戏等关键领域技术攻关凭借移动终端设备为全球玩家带来极致游戏体验,收获了消费…
阅读更多...
谷粒商城实战笔记-26-分布式组件-SpringCloud-Gateway网关核心概念原理

谷粒商城实战笔记-26-分布式组件-SpringCloud-Gateway网关核心概念原理

微服务架构中&#xff0c;API网关扮演着至关重要的角色&#xff0c;它不仅作为微服务间的通信桥梁&#xff0c;还负责安全、监控、限流等职责。 一&#xff0c;网关的发展历程 SpringCloud的网关经历了两代的迭代和更替。 第一代网关是早期的Zuul&#xff0c;由 Netflix 开发…
阅读更多...
kafka 消费者

kafka 消费者

消费者 消费者。消费者连接到Kafka上并接收消息&#xff0c;进而进行相应的业务逻辑处理。 消费组 消费者负责订阅Kafka中的主题&#xff0c;并且从订阅的主题上拉取消息。 消费组&#xff1a;每个消费者都有一个对应的消费组&#xff0c;每一个分区只能被一个消费组中的一个…
阅读更多...
深入了解Rokid UXR2.0 SDK内置的Unity AR Glass开发组件

深入了解Rokid UXR2.0 SDK内置的Unity AR Glass开发组件

本文将了解到Rokid AR开发组件 一、RKCameraRig组件1.脚本属性说明2.如何使用 二、PointableUI组件1.脚本属性说明2.如何使用 三、PointableUICurve组件1.脚本属性说明2.如何使用 四、RKInput组件1.脚本属性说明2.如何使用 五、RKHand组件1.脚本属性说明2.如何使用3.如何禁用手…
阅读更多...
昇思25天学习打卡营第17天|基于 MindSpore 实现 BERT 对话情绪识别

昇思25天学习打卡营第17天|基于 MindSpore 实现 BERT 对话情绪识别

基于 MindSpore 实现 BERT 对话情绪识别 BERT介绍 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是一种基于Transformer架构的预训练语言模型&#xff0c;由谷歌在2018年提出。从以下6个方面来介绍BERT&#xff1a; 1. 预训练和微调&…
阅读更多...
Linux C语言基础 day8

Linux C语言基础 day8

目录 思维导图&#xff1a; 学习目标&#xff1a; 学习内容&#xff1a; 1. 字符数组 1.1 二维字符数组 1.1.1 格式 1.1.2 初始化 1.1.3 二维字符数组输入输出、求最值、排序 2. 函数 2.1 概念 关于函数的相关概念 2.2 函数的定义及调用 2.2.1 定义函数的格式 2.3…
阅读更多...
GaussDB关键技术原理：高性能（五）

GaussDB关键技术原理：高性能（五）

GaussDB关键技术原理&#xff1a;高性能&#xff08;四&#xff09;从USTORE存储引擎、计划缓存计划技术、数据分区与分区剪枝、列式存储和向量化引擎、SMP并行执行等五方面对高性能关键技术进行解读&#xff0c;本篇将从LLVM动态查询编译执行、SQL-BYPASS执行优化、线程池化、…
阅读更多...
k8s核心操作_Ingress统一网关入口_域名访问配置_ingress域名转发规则配置_根据域名访问不同服务---分布式云原生部署架构搭建026

k8s核心操作_Ingress统一网关入口_域名访问配置_ingress域名转发规则配置_根据域名访问不同服务---分布式云原生部署架构搭建026

上一节我们已经把 ingress 安装好了可以看到 kubectl get svc -A 可以看到 出现了ingress-nginx 的service,在ingre-nginx这个命名空间中,有两个,一个是 ingress-nginx-controller 开了两个一个是对应http,一个对应https 一个是 ingress-nginx-controller-admission 对…
阅读更多...
14.爬虫---Selenium 经典动态渲染工具的使用

14.爬虫---Selenium 经典动态渲染工具的使用

14.Selenium 经典动态渲染工具的使用 1.查看chrome浏览器版本2.ChromeDriver 安装3.Selenium 安装4.验证安装5.基本用法5.1启动浏览器5.2导航到页面5.3查找元素5.3.1单个元素 find_element5.3.2多个元素 find_elements 5.4 执行操作5.5 动作链ActionChains5.6 执行 JavaScript …
阅读更多...
修BUG：程序包javax.servlet.http不存在

修BUG：程序包javax.servlet.http不存在

貌似昨晚上并没有成功在tomcat上面运行&#xff0c;而是直接运行了网页。 不知道为啥又报错这个。。。 解决方案&#xff1a; https://developer.baidu.com/article/details/2768022 就整了这一步就行了 而且我本地就有这个tomcat就是加进去了。 所以说啊&#xff0c;是不是&a…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023