第十八章 Express multer 文件上传

最新推荐文章于 2024-08-06 15:31:28 发布
最新推荐文章于 2024-08-06 15:31:28 发布
阅读量594 收藏 9
点赞数 16
分类专栏： Nestjs从入门到进阶 文章标签： 前端 express 后端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49014702/article/details/140279972
版权

本章将学习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

枫ゞ
关注
  • 16
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
node文件上传与下载(基于express和multer实现)
weixin_68658847的博客
01-24 1685
node文件上传与下载(基于express和multer实现)
express文件上传中间件Multer详解
hsany330的专栏
03-18 1203
multer是express官方推荐的文件上传中间件，它是在busboy的基础上开发的。目前multer的最新版本为：~1.1.0。本文将详细介绍express文件上传中间件Multer的安装与使用等，有需要的朋友们可以参考借鉴，下面来一起看看吧。 前言 Express默认并不处理HTTP请求体中的数据，对于普通请求体(JSON、二进制、字符串)数据，可以使用body-parser中间件。而文件上传(multipart/form-data请求)，可以基于请求流处理，也可以使用formidable模块或M
Nodejs 第五十八章（大文件上传）
qq1195566313的博客
03-19 1034
在现代网站中，越来越多的个性化图片，视频，去展示，因此我们的网站一般都会支持文件上传。文件上传的方案大文件上传断点续传。
multer(上传文件) & mongodb
qq_42827425的博客
03-11 239
express 参考文档 multer npm官方文档 上传单文件项目 安装multer模块 &lt;input type="file" id="file" /&gt; //前端配置 let file = $('#file')[0]; file.onchange = function () { //构造form数据 你可以用它传输文件流 它是基于form-data的传输方案 v...
Express学习5--Express实现post接口功能
jyn15159的博客
03-15 4004
post接口 post无参数 // 引入express模块 const express = require('express'); // 创建express实例 const app = express(); // 设置post接口 // 参数1：接口地址，参数2：回调函数，用来设置接口功能 app.post('/post',function(req,res){ // req是请求对象 res是响应对象 res.send({name:"abc"}) }) // 监听端口 app.list
Express框架
zep
08-09 277
一、认识Web框架 前面我们已经学习了使用http内置模块来搭建Web服务器，为什么还要使用框架？ 原生http在进行很多处理时，会较为复杂； 有URL判断、Method判断、参数处理、逻辑代码处理等，都需要我们自己来处理和封装； 并且所有的内容都放在一起，会非常的混乱； 目前在Node中比较流行的Web服务器框架是express、koa： 我们先来学习express，后面再学习koa，并且对他们进行对比； express早于koa出现，并且在Node社区中迅速流行起来： 我们可以基于expres
如何结合antd design pro 5 结合express 上传多个文件_antd 表单上传多文件(1)
04-12 690
本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。另外，由于浏览器的安全策略限制，通常不能直接获取到文件夹路径，只能让用户手动选择文件夹内的所有文件。需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论。
六. express
2401_84054263的博客
04-15 1227
express
Node.js教程-express框架
旺仔的博客
12-22 1827
Express是基于Node.js平台(建立在Node.js内置的http模块上)，快速、开放、极简的Web开发框架。中文官网。。Express可设置中间件来响应 HTTP 请求定义了路由表用于执行不同的 HTTP 请求可通过向模板传递参数来动态渲染 HTML 页面定义中间件监听request对象的data事件监听request对象的end事件解析请求参数封装模块自定义中间件解析POST提交的数据// querything 是 Node.js的内置模块// 定义中间件。
Nodejs进阶：基于express+multer的文件上传实例
01-20
基础例子：借助express、multer实现单图、多图上传。 常用API：获取上传的图片的信息。 进阶使用：自定义保存的图片路径、名称。 环境初始化 非常简单，一行命令。 npm install express multer multer --save 每...
使用express+multer实现node中的图片上传功能
08-28
使用Express+Multer实现Node中的图片上传功能 Express是一个流行的 Node.js 框架， Multer 是一个用于处理multipart/form-data 数据格式的中间件，主要用于上传功能中。在本篇文章中，我们将详细介绍如何使用 ...
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 287
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 531
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
小程序支付（前端）
weixin_43993121的博客
08-05 156
【代码】小程序支付（前端）
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 112
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2845
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
WHAT - Table 表格组件实践 - 拖拽列改变宽度 Resizable Column
最新发布
weixin_58540586的博客
08-06 469
【代码】WHAT - Table 表格组件实践 - 拖拽列改变宽度 Resizable Column。
express multer
08-20
Express是一个流行的Node.js框架，用于构建Web应用程序。Multer是一个Express中间件，用于处理HTTP请求中的文件上传操作。 使用Multer可以轻松处理表单中的文件上传。它提供了一些功能，例如限制文件类型、文件大小和保存文件等。 在使用Express和Multer时，你需要首先安装它们的npm包。可以通过以下命令安装： ``` npm install express multer ``` 然后，在你的Express应用程序中，导入这些模块并将其配置为中间件。下面是一个简单的示例： ```javascript const express = require('express'); const multer = require('multer'); // 创建Express应用程序 const app = express(); // 配置Multer中间件 const upload = multer({ dest: 'uploads/' }); // 定义文件上传路由 app.post('/upload', upload.single('file'), (req, res) => { // 处理上传的文件 console.log(req.file); // 上传的文件信息 res.send('File uploaded!'); }); // 启动服务器 app.listen(3000, () => { console.log('Server is listening on port 3000'); }); ``` 在上面的示例中，我们创建了一个Express应用程序，并将Multer配置为中间件。使用`upload.single`方法可以处理单个文件上传，其中`'file'`参数是表单字段的名称。 当客户端发送带有文件的POST请求到`/upload`路由时，中间件会将文件保存到指定的目录（在此示例中为`uploads/`），并将文件信息存储在`req.file`对象中。你可以根据需要进一步处理文件，例如将其移动到其他地方或将其保存到数据库中。 这只是一个简单的示例，你可以根据自己的需求进行更复杂的配置和处理。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

枫ゞ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值