第十八章 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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

@RequiredArgsConstructor实现构造器注入

@RequiredArgsConstructor实现构造器注入

RequiredArgsConstructor实现构造器注入 1. Autowired 和 Resource 注解 Autowired Autowired 是 Spring 框架提供的注解&#xff0c;用于自动装配依赖。可以用于字段、构造函数和 setter 方法。 Autowired private ISysUserService userService;Resource Resource 是 Jav…
阅读更多...
Java 中的 switch 语句：类型支持与限制

Java 中的 switch 语句：类型支持与限制

Java 中的 switch 语句&#xff1a;类型支持与限制 1、switch 语句支持的数据类型2、switch 语句不支持的数据类型3、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在 Java 中&#xff0c;switch 语句是一种用于多分支选择的控制结构…
阅读更多...
物联网专业现代学徒制人才培养质量评价体系构建

物联网专业现代学徒制人才培养质量评价体系构建

一、 引 言 随着信息技术的飞速发展&#xff0c;物联网&#xff08;IoT&#xff09;技术已成为推动全球信息化、智能化发展的关键力量。物联网专业人才的培养质量直接关系到行业的创新能力和竞争力。现代学徒制作为一种创新的人才培养模式&#xff0c;已被广泛应用于职业教育中…
阅读更多...
HCIP.ppp协议（点到点）认证阶段

HCIP.ppp协议（点到点）认证阶段

ppp协议 ppp是点到点的协议 1.兼容性很好 2.可以进行认证和授权 3.可移植性强 三个阶段 1.链路协商阶段 LCP协商------去协商ppp链路会话 2.认证&#xff08;可选&#xff09; 3.NCP协商------网络层协商阶段&#xff08;根据网络层的不同NCP协议就会存在一个对应的NC…
阅读更多...
查看尝试登服务器ssh 访问ip地址

查看尝试登服务器ssh 访问ip地址

不指定时间查看尝试登录服务器的SSH访问IP地址 # CentOS/RHEL系统 zgrep "sshd" /var/log/secure-* | grep "Failed password" | awk {print $(NF-3)} | sort | uniq -c | sort -nr | head -n 10检查过去7天的日志尝试登录服务器的SSH访问IP地址 # CentOS…
阅读更多...
QT--SQLite

QT--SQLite

配置类相关的表&#xff0c;所以我使用sqlite,且QT自带该组件&#xff1b; 1.安装 sqlite-tools-win-x64-3460000、SQLiteExpert5.4.31.575 使用SQLiteExpert建好数据库.db文件&#xff0c;和对应的表后把db文件放在指定目录 ./db/program.db&#xff1b; 2.选择sql组件 3.新…
阅读更多...
GaussDB关键技术原理：高性能（五）

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

GaussDB关键技术原理&#xff1a;高性能&#xff08;四&#xff09;从USTORE存储引擎、计划缓存计划技术、数据分区与分区剪枝、列式存储和向量化引擎、SMP并行执行等五方面对高性能关键技术进行解读&#xff0c;本篇将从LLVM动态查询编译执行、SQL-BYPASS执行优化、线程池化、…
阅读更多...
【文档+源码+调试讲解】冷冻仓储管理系统

【文档+源码+调试讲解】冷冻仓储管理系统

摘 要 随着互联网时代的到来&#xff0c;同时计算机网络技术高速发展&#xff0c;网络管理运用也变得越来越广泛。因此&#xff0c;建立一个B/S结构的冷冻仓储管理系统&#xff0c;会使冷冻仓储管理系统工作系统化、规范化&#xff0c;也会提高冷冻仓储管理系统平台形象&#x…
阅读更多...
若依搭建 帝可得 售货机 笔记

若依搭建 帝可得 售货机 笔记

一、搭建项目 1.后端gitee链接&#xff1a; 启动项目时记得修改mysql和redis的相关信息&#xff1b;创建项目相关数据库&#xff0c;并导入初始化的SQL脚本 dkd-parent: 帝可得后台管理系统 (gitee.com) 2.前端gitee链接&#xff1a; 启动项目时记得安装依赖&#xff1a;np…
阅读更多...
IPv4与IPv6的定义和主要区别

IPv4与IPv6的定义和主要区别

IPv4与IPv6的定义 IPv4&#xff0c;即互联网协议版本4&#xff08;InternetProtocolversion4&#xff09;&#xff0c;是互联网使用最为广泛的协议之一。它采用32位地址&#xff0c;以点分十进制表示&#xff0c;如192.168.1.1。 IPv6&#xff0c;即互联网协议版本6&#xff…
阅读更多...
自动驾驶革命：商汤科技突破性大模型UniAD震撼登场

自动驾驶革命：商汤科技突破性大模型UniAD震撼登场

自动驾驶革命&#xff1a;商汤科技突破性大模型UniAD震撼登场&#xff01; 在人工智能的浪潮中&#xff0c;自动驾驶技术一直是科技巨头们竞相追逐的圣杯。而今&#xff0c;商汤科技联合上海人工智能实验室与武汉大学&#xff0c;以一篇名为"Planning-oriented Autonomou…
阅读更多...
Shader每日一练（2）护盾

Shader每日一练（2）护盾

Shader "Custom/Shield" {Properties{_Size("Size", Range(0 , 10)) 1 // 控制噪声纹理缩放大小的参数_colorPow("colorPow", Float) 1 // 控制颜色强度的指数_colorMul("colorMul", Float) 1 // 控制颜色乘法因子_mainColor("…
阅读更多...
政安晨：【Keras机器学习示例演绎】（五十四）—— 使用神经决策森林进行分类

政安晨：【Keras机器学习示例演绎】（五十四）—— 使用神经决策森林进行分类

目录 导言 数据集 设置 准备数据 定义数据集元数据 为训练和验证创建 tf_data.Dataset 对象 创建模型输入 输入特征编码 深度神经决策树 深度神经决策森林 实验 1&#xff1a;训练决策树模型 实验 2&#xff1a;训练森林模型 政安晨的个人主页&#xff1a;政安晨 欢…
阅读更多...
【机器学习】独立成分分析（ICA）：解锁信号的隐秘面纱

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

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 独立成分分析&#xff08;ICA&#xff09;&#xff1a;解锁信号的隐秘面纱引言I…
阅读更多...
人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解

人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解

大家好&#xff0c;我是微学AI,今天给大家分享一下人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解。 Sklearn&#xff08;Scikit-learn&#xff09;是一个基于Python的开源机器学习库&#xff0c;它提供了简单有效的数据挖掘和数据分析工具。Sklearn包含了…
阅读更多...
webstorm问题解决：无法识别 @

webstorm问题解决：无法识别 @

问题解决tsconfig.json 问题 本地的 vite.config.ts 已经配置 路径 但是&#xff0c;我用webstorm 上识别不了 解决 新增文件tsconfig.json&#xff0c;添加 baseUrl 和 paths 的配置&#xff0c;以告诉 TypeScript 和 WebStorm 如何解析路径别名 tsconfig.json {&quo…
阅读更多...
无需构建工具，快速上手Vue2 + ElementUI

无需构建工具，快速上手Vue2 + ElementUI

无需构建工具&#xff0c;快速上手Vue2 ElementUI 在前端开发的世界中&#xff0c;Vue.js以其轻量级和易用性赢得了开发者的青睐。而Element UI&#xff0c;作为一个基于Vue 2.0的桌面端组件库&#xff0c;提供了丰富的界面组件&#xff0c;使得构建美观且功能丰富的应用变得…
阅读更多...
禁止使用存储过程

禁止使用存储过程

优质博文&#xff1a;IT-BLOG-CN 灵感来源 什么是存储过程 存储过程Stored Procedure是指为了完成特定功能的SQL语句集&#xff0c;经编译后存储在数据库中&#xff0c;用户可通过指定存储过程的名字并给定参数&#xff08;如果该存储过程带有参数&#xff09;来调用执行。 …
阅读更多...
AndroidStudio2023.3版本avd manager模拟器无法创建

AndroidStudio2023.3版本avd manager模拟器无法创建

创建到最后一步的时候提示WARN - #com.android.sdklib.internal.avd.AvdManager - com.android.prefs.AndroidLocationsException: Can’t locate Android SDK installation directory for the AVD .ini file. 前提&#xff1a; 1.sdk路径没问题 2.安装了下图内容 那是什么原因…
阅读更多...
Linux /etc/profile 详解

Linux /etc/profile 详解

概述 Linux是一个多用户的操作系统。每个用户登录系统后&#xff0c;都会有一个专用的运行环境。通常每个用户默认的环境都是相同的&#xff0c;这个默认环境实际上就是一组环境变量的定义。用户可以对自己的运行环境进行定制&#xff0c;其方法就是修改相应的系统环境变量&…
阅读更多...
最新文章

Copyright @ 2022~2023