MIME 类型form-data

form-data

mime/form_data2026-08-24 19:46:25

multipart/form-data 是一种 MIME 类型，用于表示包含多个部分的表单数据。它通常用于通过 HTTP 请求上传文件或提交包含文件的表单数据。每个部分都有自己的内容类型和内容描述。

结构

multipart/form-data 的每个部分由以下几部分组成：

  1. 边界（Boundary）：用于分隔不同部分的字符串。
  2. 头部（Headers）：描述该部分的内容类型和其他元数据。
  3. 内容（Body）：实际的数据内容。

示例

假设有一个包含文本字段和文件上传的表单：

<form id="myForm" enctype="multipart/form-data" method="post">
  <input type="text" name="username" value="JohnDoe">
  <input type="file" name="profilePicture">
  <button type="submit">Submit</button>
</form>

提交该表单时，浏览器会生成如下的 multipart/form-data 请求：

POST /submit HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="username"

JohnDoe
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="profilePicture"; filename="profile.jpg"
Content-Type: image/jpeg

(binary data)
------WebKitFormBoundary7MA4YWxkTrZu0gW--

使用 FormData 对象构建 multipart/form-data

你可以使用 JavaScript 的 FormData 对象来构建和发送 multipart/form-data 请求。

示例代码

var formElement = document.getElementById('myForm');
var formData = new FormData(formElement);

fetch('https://api.example.com/submit', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

服务器端解析

在服务器端，可以使用不同的库来解析 multipart/form-data 请求。例如，在 Node.js 中可以使用 multer 中间件。

示例代码

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();

app.post('/submit', upload.single('profilePicture'), (req, res) => {
  console.log(req.body.username); // JohnDoe
  console.log(req.file); // 文件信息
  res.send('File uploaded successfully');
});

app.listen(3000, () => console.log('Server running on port 3000'));

本页目录