在 Express 中处理文件上传，包括查看上传的报文、处理文件上传、以及使用 formidable 这类中间件来解析上传的文件。
🧐 一、查看文件上传报文
文件上传通常使用 multipart/form-data 编码类型，浏览器会在表单提交时自动创建上传报文。你可以通过查看请求的报文来了解上传的数据。使用 console.log(req.headers) 可以打印请求的头部信息，查看文件上传的具体内容。
1. 查看请求头
js
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 包：
bash
npm install formidable2. 创建上传路由
在 Express 中使用 formidable 来处理文件上传的示例代码如下：
1️⃣ 处理上传路由：
js
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 表单来上传文件：
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 会在服务器上创建一个临时文件夹，用于保存上传的文件。你需要确保该目录存在，或者在代码中创建它。
示例：
js
const fs = require('fs');
const uploadsDir = path.join(__dirname, '/uploads');
if (!fs.existsSync(uploadsDir)) {
fs.mkdirSync(uploadsDir); // 如果目录不存在，则创建
}2. 文件大小限制：
formidable 默认没有文件大小限制，但你可以通过 maxFileSize 选项来限制上传文件的大小。例如：
js
form.maxFileSize = 10 * 1024 * 1024; // 限制文件大小为 10MB3. 文件类型检查：
如果需要限制文件的类型，可以使用 fileFilter 方法来过滤不符合要求的文件。例如，只允许图片上传：
js
form.on('fileBegin', (name, file) => {
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
throw new Error('文件类型不支持');
}
});4. 保存文件：
formidable 默认会将文件保存在临时目录中，你可以通过 file.path 获取文件路径，然后选择将文件保存到永久存储位置。
例如，保存文件到指定目录：
js
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获取上传文件信息。
- 创建
- 文件上传注意事项：需要考虑文件大小、类型限制、临时文件保存等因素。