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

在 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 formidable

2. 创建上传路由

在 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; // 限制文件大小为 10MB

3. 文件类型检查：

如果需要限制文件的类型，可以使用 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 获取上传文件信息。
文件上传注意事项：需要考虑文件大小、类型限制、临时文件保存等因素。

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

🧐 一、查看文件上传报文

1. 查看请求头

2. 查看请求体

🎯 二、处理文件上传

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

1. 安装 formidable

2. 创建上传路由

1️⃣ 处理上传路由：

2️⃣ 解析过程：

3️⃣ 启动服务器：

📄 四、HTML 上传表单示例

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

1. 临时文件夹：

2. 文件大小限制：

3. 文件类型检查：

4. 保存文件：

✅ 六、总结

1. 安装 `formidable`