第十八章 Express multer 文件上传

最新推荐文章于 2024-12-09 00:56:40 发布

枫ゞ

最新推荐文章于 2024-12-09 00:56:40 发布

阅读量712

点赞数 16

分类专栏： Nestjs从入门到进阶文章标签：前端 express 后端 node.js

本文链接：https://blog.youkuaiyun.com/weixin_49014702/article/details/140279972

版权

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

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

npm init -y

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

npm install express multer cors

创建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 把静态服务跑起来

游览器访问 http://192.168.100.222:8080/
接着点击选择文件上传文件看游览器的控制台可以看到发送了请求此时aaa 请求的 body 是多个 boundary 分隔的格式

分隔符是在 Content-Type 指定的

这是 form-data 的传输格式
接着我们在控制端可以看到服务端打印了信息

服务端多了 uploads 目录，下面就保存着我们上传的文件：