祥符网站建设网络运营
序言
最近在写项目的过程中有一个需求是利用 HTTP 协议传输图片和视频，经过查询方法相应的方法发现使用 multipart/form-data 的方式，这是最常见处理二进制文件的表单编码类型。
学习了一下午，现在总结一下使用的方法和相关的知识点，欢迎指正😄！
一、如何使用？
⭐️
注：我们的开发语言是 C++，主要使用到的库是 httplib，帮助我们快速的搭建HTTP 服务器，以及相应数据的处理
1. 前端逻辑
首先我们配合使用 httplib 快速的搭建一个网络首页：
这里界面有些简陋哈哈，但是学习的意义大于外表！
这里需要用户填写昵称和一个图片（分别对应纯文本数据和图片数据稍后形成对比）。前端的代码非常的简洁，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>Simple Form</title>
</head>
<body><form action="/submit" method="POST" enctype="multipart/form-data"><label>昵称:</label><input type="text" name="nickname" required><br><label>图片:</label><input type="file" name="image" accept="image/*" required><br><button type="submit">Submit</button></form>
</body>
</html>
我们来逐个介绍每一个关键元素的作用，首先就是 form 元素，用于定义用户可以填写并提交数据的表单。它负责收集用户输入并将数据发送到指定的服务器地址：
action：定义表单提交的目标地址，比如这里就表示提交到当前域名下的/submit路径（对于处理表单数据的路径）method：提交表单时最常用的就是POST方式enctype：定义表单数据的编码类型，影响服务器解析数据的方式。常见值：application/x-www-form-urlencoded（默认）: 适合普通键值对数据（比如账号和密码）multipart/form-data: 必须在表单 包含文件上传 时使用text/plain: 将数据以 纯文本形式 发送，较少使用
现在我们在介绍 input 元素，来控制用户的输入：
type：我们这里使用了text代表普通文本输入；以及file代表传输特定的文件（支持accept属性限制文件类型）name：定义该输入框的名称，用于在表单提交时标识字段，在后面可以根据特定的字段提取相应的数据required：代表数据必须填写，不可为空
这就是前端的逻辑，很多时候前端占据多数的都是样式的调整，咋们直接抽丝剥茧来一个最基础版的帮助大家理解。
2. 后端逻辑
通过前端的逻辑我们得知，用户会提交一个昵称和一个图片以 POST 的方式发送到 /submit 下进行处理。那我们怎么实现呢，我们使用一个 httplib 提供的接口，如下：
Server &Post(const std::string &pattern, Handler handler);
Post： 代表处理Post方式传输的数据pattern：表示相应的处理路径，这里我们就应该传入/submithandler：定义为using handler = std::function<void(const httplib& Requests, httplib::Response&)>我们定义的处理函数，需要符合他的参数返回值
但是在使用之前，我们还需要学习一个知识点，那就是如何将表单里面的数据以取出来！
大家记好了，我们表单当中的每一个数据都以 MultipartFormData 的形式存储在 httplib& Requests 中，我们只需要每个数据的 命名 即可提取（咦？命名 怎么来的呀？如果你感到疑惑，请移步到 input 元素的 name 字段）。具体使用方式：
/*部分代码*/
void HandlePost(const httplib::Request &req, httplib::Response &rsp)
{/*这里是做严谨地检查，是否存在该命名的数据*/if (req.has_file("nickname")) {/*提取表单中单个元素的数据*/httplib::MultipartFormData nickname = req.get_file_value("nickname");
其实这个类型就是一个结构体，存储数据的相关信息：
struct MultipartFormData {std::string name; /*数据的名称*/std::string content; /*数据的内容*/std::string filename;/*文件的名称（如果他是一个文件，否则空）*/std::string content_type;/*数据类型*/
};
咋们打印看一下上传的图片的文件信息，就不打印内容了是乱码：
image/jpeg
AVL.jpg
image
现在基本的使用咋们理解了，那底层是咋一回事呢？
二、 HTTP 报文传输格式
提供使用浏览器的网络抓包，我们先来看一下传输的 请求头 是怎么样的：
发现在数据类型后面多了一个字段 boundary(分界线)，boundary 是客户端（如浏览器）自动生成的，用来分隔 HTTP 请求体中的多个部分（因为表单当中有多个类型的数据需要间隔开）。
现在我们看一下正文内容的存储格式：
两个数据一个是文本一个是图片（但是图片的数据没有正常显示）。
总结
HTML表单 是网页中与用户交互的重要元素，允许用户输入数据并将其发送到服务器进行处理。也许我们可以自己尝试设计一下解析 multipart/form-data 报文请求的方法。纸上得来终觉浅，绝知此事要躬行！