当前位置：首页 > news >正文

express查看文件上传报文，处理文件上传，以及formidable包的使用

news 来源：原创 2025/4/25 9:37:41

在 Express 中处理文件上传，包括查看上传的报文、处理文件上传、以及使用 formidable 这类中间件来解析上传的文件。

🧐 一、查看文件上传报文

文件上传通常使用 multipart/form-data 编码类型，浏览器会在表单提交时自动创建上传报文。你可以通过查看请求的报文来了解上传的数据。使用 console.log(req.headers) 可以打印请求的头部信息，查看文件上传的具体内容。

1. 查看请求头

app.post('/upload', (req, res) => {console.log(req.headers);  // 查看上传的报文头部res.send('查看上传请求');
});

上传请求的头部会显示 Content-Type: multipart/form-data; boundary=----WebKitFormBoundary....，其中 boundary 是分隔符，用来标识不同部分的边界。

2. 查看请求体

你还可以通过 req.body 来查看表单数据。但需要注意，req.body 默认不能直接处理文件上传的数据，因此需要使用中间件进行处理。

🎯 二、处理文件上传

在 Express 中，有多个中间件可以用来处理文件上传，其中最常用的就是 multer 和 formidable。下面我将介绍如何使用 formidable 处理文件上传。

🛠️ 三、使用 formidable 包处理文件上传

formidable 是一个流行的 Node.js 文件上传库，可以处理 multipart/form-data 请求并解析文件。它会将文件保存到临时目录，并将文件信息存储在 fields 和 files 属性中。

1. 安装 `formidable`

首先，你需要安装 formidable 包：

npm install formidable

2. 创建上传路由

在 Express 中使用 formidable 来处理文件上传的示例代码如下：

1️⃣ 处理上传路由：

const express = require('express');
const formidable = require('formidable');
const path = require('path');
const app = express();
const port = 3000;// 文件上传路由
app.post('/upload', (req, res) => {// 创建 formidable 表单对象const form = new formidable.IncomingForm();// 设置上传文件的临时保存目录form.uploadDir = path.join(__dirname, '/uploads');form.keepExtensions = true;  // 保留文件的扩展名// 解析表单form.parse(req, (err, fields, files) => {if (err) {res.status(500).send('文件上传失败');return;}console.log('表单字段：', fields);  // 普通字段数据console.log('上传文件：', files);  // 文件信息res.send({fields: fields,files: files,message: '文件上传成功'});});
});app.listen(port, () => {console.log(`服务器已启动：http://localhost:${port}`);
});

2️⃣ 解析过程：

formidable.IncomingForm()：创建一个表单对象。
form.uploadDir：指定文件上传的临时保存目录。
form.keepExtensions：保持文件的扩展名。
form.parse(req, callback)：解析请求数据，将文件数据（如图片）和表单字段（如用户名）分离到 files 和 fields 中。

3️⃣ 启动服务器：

启动服务器后，访问 http://localhost:3000，可以通过 Postman 或者 HTML 表单来进行文件上传。

📄 四、HTML 上传表单示例

你可以使用以下 HTML 表单来上传文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件上传</title>
</head>
<body><h1>文件上传表单</h1><form action="/upload" method="POST" enctype="multipart/form-data"><label for="file">选择文件：</label><input type="file" name="file" id="file" /><button type="submit">上传文件</button></form>
</body>
</html>

📝 五、文件上传处理的注意事项

1. 临时文件夹：

formidable 会在服务器上创建一个临时文件夹，用于保存上传的文件。你需要确保该目录存在，或者在代码中创建它。

示例：

const fs = require('fs');
const uploadsDir = path.join(__dirname, '/uploads');
if (!fs.existsSync(uploadsDir)) {fs.mkdirSync(uploadsDir); // 如果目录不存在，则创建
}

2. 文件大小限制：

formidable 默认没有文件大小限制，但你可以通过 maxFileSize 选项来限制上传文件的大小。例如：

form.maxFileSize = 10 * 1024 * 1024; // 限制文件大小为 10MB

3. 文件类型检查：

如果需要限制文件的类型，可以使用 fileFilter 方法来过滤不符合要求的文件。例如，只允许图片上传：

form.on('fileBegin', (name, file) => {if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {throw new Error('文件类型不支持');}
});

4. 保存文件：

formidable 默认会将文件保存在临时目录中，你可以通过 file.path 获取文件路径，然后选择将文件保存到永久存储位置。

例如，保存文件到指定目录：

const fs = require('fs');
const targetPath = path.join(__dirname, '/uploads/', file.name);
fs.renameSync(file.path, targetPath); // 重命名并移动文件

✅ 六、总结

查看上传报文：通过 console.log(req.headers) 来查看上传的请求头信息。
处理文件上传：可以使用 formidable 中间件来处理文件上传，解析请求体，并保存文件。
formidable 基本用法：
- 创建 IncomingForm() 实例，配置上传目录和文件扩展名。
- 使用 parse() 方法解析上传的数据。
- 可通过 fields 获取普通表单字段，files 获取上传文件信息。
文件上传注意事项：需要考虑文件大小、类型限制、临时文件保存等因素。