HTTP请求传参方式详解：路径参数、查询参数、表单编码、JSON与文件上传

脚本专家

在实际的 Web 开发中，客户端向服务端传递数据的方式有多种选择，不同的场景需要采用不同的传参方式。本文介绍五种最常见的 HTTP 请求传参形式：路径参数、查询参数、application/x-www-form-urlencoded、application/json 和 multipart/form-data，并基于 Express 框架给出完整的服务端处理代码，方便读者在本地测试验证。

一、路径参数（Route Parameters）
路径参数直接将值嵌入 URL 路径中，常用于标识具体资源，如用户 ID、商品 ID 等。例如 GET /users/123，其中 123 就是路径参数。在 Express 中通过路由占位符 :id 定义，服务端使用 req.params 获取。

2. // 服务端路由定义
3. app.get('/users/:id', (req, res) => {
4.   const userId = req.params.id;
5.   res.json({ message: '获取用户信息', userId });
6. });

复制代码

二、查询参数（Query Parameters）
查询参数附加在 URL 的问号 ? 之后，多个参数用 & 连接，常见于搜索、过滤、分页等场景。例如 GET /search?keyword=node&page=2。Express 通过 req.query 获取所有查询参数。

2. app.get('/search', (req, res) => {
3.   const { keyword, page } = req.query;
4.   res.json({ message: '查询参数已接收', keyword, page: page || 1 });
5. });

复制代码

三、application/x-www-form-urlencoded
这是 HTML 表单默认的编码方式（method="post" 且未指定 enctype 时）。提交时浏览器将表单字段编码为 key=value&key2=value2 的形式，放入请求体。服务端需使用 express.urlencoded() 中间件解析。

2. // 前端表单（示例）
3. <form action="/register" method="post">
4.   <input type="text" name="username" />
5.   <input type="password" name="password" />
6.   <button>submit</button>
7. </form>
9. // 服务端处理
10. app.use(express.urlencoded({ extended: true }));
11. app.post('/register', (req, res) => {
12.   const { username, password } = req.body;
13.   res.json({ username, password });
14. });

复制代码

四、application/json
RESTful API 常用 JSON 格式传输复杂数据结构。前端需要设置 Content-Type: application/json，并将 JavaScript 对象序列化为 JSON 字符串。服务端使用 express.json() 中间件解析。

2. // 前端用 fetch 发送 JSON 请求
3. fetch('/login', {
4.   method: 'POST',
5.   headers: { 'Content-Type': 'application/json' },
6.   body: JSON.stringify({ username: 'admin', password: '123456' })
7. });
9. // 服务端处理
10. app.use(express.json());
11. app.post('/login', (req, res) => {
12.   const { username, password } = req.body;
13.   res.json({ username, password });
14. });

复制代码

五、multipart/form-data
文件上传必须使用 multipart/form-data，同时也可以提交普通表单字段。表单需设置 enctype="multipart/form-data"，浏览器会自动生成 Content-Type 并包含 boundary 分隔符。服务端使用 multer 等中间件处理。

2. // 前端表单（需指定 enctype）
3. <form action="/upload" method="post" enctype="multipart/form-data">
4.   <input type="file" name="avatar" />
5.   <input type="text" name="username" />
6.   <input type="password" name="password" />
7.   <button>submit</button>
8. </form>
10. // 服务端处理（需安装 multer）
11. const multer = require('multer');
12. const upload = multer({ storage: multer.memoryStorage() });
13. app.post('/upload', upload.single('avatar'), (req, res) => {
14.   // req.file 包含上传文件信息，req.body 包含文本字段
15.   res.json({
16.     message: '文件上传成功',
17.     filename: req.file.originalname,
18.     size: req.file.size,
19.     mimetype: req.file.mimetype
20.   });
21. });

复制代码

完整 Express 服务端示例
下面整合上述五种传参方式的处理逻辑，提供一个可直接运行的本地服务器。

2. const express = require('express');
3. const cors = require('cors');
4. const multer = require('multer');
6. const app = express();
7. const port = 3000;
9. app.use(cors());
11. // 解析 JSON 和 URL 编码的请求体
12. app.use(express.json());
13. app.use(express.urlencoded({ extended: true }));
15. // 1. 路径参数
16. app.get('/users/:id', (req, res) => {
17.   res.json({ message: '获取用户信息', userId: req.params.id });
18. });
20. // 2. 查询参数
21. app.get('/search', (req, res) => {
22.   const { keyword, page } = req.query;
23.   res.json({ message: '查询参数已接收', keyword, page: page || 1 });
24. });
26. // 3. URL 编码表单
27. app.post('/register', (req, res) => {
28.   const { username, password } = req.body;
29.   res.json({ username, password });
30. });
32. // 4. JSON 请求体
33. app.post('/login', (req, res) => {
34.   const { username, password } = req.body;
35.   res.json({ username, password });
36. });
38. // 5. 文件上传（multipart）
39. const upload = multer({ storage: multer.memoryStorage() });
40. app.post('/upload', upload.single('avatar'), (req, res) => {
41.   res.json({
42.     message: '文件上传成功',
43.     filename: req.file.originalname,
44.     size: req.file.size,
45.     mimetype: req.file.mimetype
46.   });
47. });
49. app.listen(port, () => {
50.   console.log(`服务器启动：http://localhost:${port}`);
51. });

复制代码

测试方法
将上述代码保存为 server.js，依次执行以下命令初始化项目并安装依赖：

2. npm init -y
3. npm i express cors multer
4. node server.js

复制代码

服务启动后，可以使用浏览器、Postman 或 curl 发送对应请求，观察服务端返回的 JSON 数据以及终端输出的日志。通过实际测试，可以更直观地理解不同传参方式在客户端构造和服务端接收上的差异。

热心网友3

非常详实的总结，感谢楼主分享！对初学者能快速分清几种传参方式很有帮助。之前在`urlencoded`和`json`的选择上有点模糊，看完清晰多了。另外提醒一下，如果文件上传要持久化到磁盘，`multer`的`diskStorage`可以指定保存路径，楼主给的`memoryStorage`适合临时处理或转存到云存储。收藏了！