当前位置： 首页 > news >正文

HTTP multipart/form-data 请求

news 2026/5/15 18:43:49

序言

 最近在写项目的过程中有一个需求是利用 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：表示相应的处理路径，这里我们就应该传入 /submit
  • handler：定义为 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 报文请求的方法。纸上得来终觉浅，绝知此事要躬行！

相关文章：

HTTP multipart/form-data 请求

序言 最近在写项目的过程中有一个需求是利用 HTTP 协议传输图片和视频&#xff0c;经过查询方法相应的方法发现使用 multipart/form-data 的方式&#xff0c;这是最常见处理二进制文件的表单编码类型。  学习了一下午&#xff0c;现在总结一下使用的方法和相关的知识点&#x…...

编程日记 2024/12/10 6:56:50

配置服务器的免密登录

在服务器中配置别名和免密登录 如果没有生成过公钥和密钥 ssh-keygen然后就生成了公钥和密钥&#xff0c;下一步进入.ssh文件夹 cd .ssh/可以看到文件夹中会多出来三个文件 id_rsa&#xff1a;密钥id_rsa.pub&#xff1a;公钥known_hosts&#xff1a;A通过ssh首次连接到B&am…...

编程日记 2024/12/10 6:50:43

普通遥控电动遮阳雨棚怎么接入米家并用苹果手机Siri控制

环境&#xff1a; 遥控电动遮阳雨棚 无线射频拷贝器 米家APP 问题描述&#xff1a; 普通遥控电动遮阳雨棚怎么接入米家并用苹果手机Siri控制 解决方案&#xff1a; 1.先看看遥控器射频参数,有些在里面板子上&#xff0c;要拆开才能看到&#xff0c;我这是433的 2.到网店…...

编程日记 2024/12/10 6:49:40

两种不同简缩极化的六个方程

方程1 (3*A*(b - a*1i 1) - A*((c d*1i)*(f1 f2*1i)*1i - (c d*1i)^2))*(a - b*1i)*1i 3*A*(b - a*1i 1) 2*(A*(c f2 d*1i - f1*1i) A*(c d*1i - (a b*1i)*(c d*1i)*1i))*(c - d*1i) (A*(c f2 d*1i - f1*1i) A*(c d*1i - (a b*1i)*(c d*1i)*1i))*(f1 - f2…...

编程日记 2024/12/10 6:44:35

环形缓冲区（Ring Buffer）：概念、功能、使用场景与实现

一、概念 环形缓冲区&#xff08;Ring Buffer&#xff09;&#xff0c;又称循环缓冲区&#xff0c;是一种用于数据缓冲的数据结构。其核心思想是将缓冲区视为一个环形结构&#xff0c;当数据写入到缓冲区的末尾时&#xff0c;会自动回绕到缓冲区的开头继续写入&#xff0c;形成…...

编程日记 2024/12/10 6:43:34

大连理工大学数据结构2003年硕士入学试题

大连理工大学2003年硕士入学试题 数据结构部分(共75分) 一、回答下列问题(20分) 1&#xff0e;循环队列用数组A[0&#xff0e;&#xff0e;m—1)存放其数据元素。设tail指向其实际的队尾&#xff0c;front指向其实际队首的前一个位置&#xff0c;则当前队列中的数据元素有多少个…...

编程日记 2024/12/10 6:42:31

Master EDI 项目需求分析

Master Electronics 通过其全球分销网络&#xff0c;支持多种采购需求&#xff0c;确保能够为客户提供可靠的元件供应链解决方案&#xff0c;同时为快速高效的与全球伙伴建立合作&#xff0c;Master 选择通过EDI来实现与交易伙伴间的数据传输。 EDI为交易伙伴之间建立了一个安…...

编程日记 2024/12/10 6:40:29

图海寻径——图相关算法的奇幻探索之旅

一、图的表示 1. 邻接矩阵 (Adjacency Matrix) #include <iostream> #include <vector> #include <queue> #include <limits>using namespace std;class GraphMatrix { private:int numVertices;vector<vector<int>> adjMatrix;const st…...

编程日记 2024/12/10 6:37:25

亚马逊云科技re:Invent：生成式AI与全球布局

作为全球云计算和人工智能领域一年一度的顶级盛宴&#xff0c;亚马逊云科技2024 re:Invent全球大会吸引了超过6万名现场观众以及40多万名线上参会者。而大会上生成式AI的相关话题和内容&#xff0c;也成为了所有观众关注的焦点。 大会期间&#xff0c;亚马逊云科技全球服务副总…...

编程日记 2024/12/10 6:36:24

Android 因为混淆文件配置,打release包提示running R8问题处理

一、报错信息 Missing classes detected while running R8. Please add the missing classes or apply additional keep rules that are generated in E:\workplace\xxxxxx\app\build\outputs\mapping\release\missing_rules.txt. Missing class org.mediakit.R$layout (refer…...

编程日记 2024/12/10 6:34:22

20241209给Ubuntu20.04系统的的交换分区增加为20GB的步骤

20241209给Ubuntu20.04系统的的交换分区增加为20GB的步骤 2024/12/9 21:10 缘起&#xff0c;编译中科创达的高通CM6125模块的Android10的时候&#xff0c;老报错。 编译环境可以编译荣品的RK3566的Android13/Buildroot。 以前荣品的RK3566的Android13的编译环境是可以编译通CM6…...

编程日记 2024/12/10 6:33:20

Centos7环境下nifi单机部署

Centos7环境下nifi单机部署 前言一、安装Nifi1.1 下载并解压1.2 修改配置文件 二、启动Nifi程序三、Nifi的简单使用3.1 文件移动3.2 本地文件传到HDFS 参考博客 前言 本以为在服务器上部署nifi很简单&#xff0c;跟着教程走就好&#xff0c;但是并没有成功&#xff0c;可能是因…...

编程日记 2024/12/10 6:32:19

如何通过轻易云实现金蝶云星空与旺店通数据集成

案例分享&#xff1a;柏为金蝶退料申请退料开单08.03 在企业的供应链管理中&#xff0c;数据的准确性和实时性至关重要。本文将重点介绍如何通过轻易云数据集成平台&#xff0c;将金蝶云星空的数据高效集成到旺店通旗舰奇门系统中&#xff0c;以实现柏为金蝶退料申请退料开单0…...

编程日记 2024/12/10 6:31:18

OSG开发笔记（三十七）：OSG基于windows平台msvc2017x64编译器官方稳定版本OSG3.4.1搭建环境并移植Demo

​若该文为原创文章&#xff0c;未经允许不得转载 本文章博客地址&#xff1a;https://blog.csdn.net/qq21497936/article/details/144258047 各位读者&#xff0c;知识无穷而人力有穷&#xff0c;要么改需求&#xff0c;要么找专业人士&#xff0c;要么自己研究 长沙红胖子Qt…...

编程日记 2024/12/10 6:30:15

2024最新小猫咪PHP加密系统源码V1.4_本地API接口_带后台

2024最新小猫咪PHP加密系统源码V1.4_本地API接口_带后台 小猫咪PHP加密系统历时半年&#xff0c;它再一次迎来更新&#xff0c;更新加密算法&#xff08;这应该是最后一次更新加密算法了&#xff0c;以后主要更新都在框架功能上面了&#xff09;&#xff0c;适配php56-php74&a…...

编程日记 2024/12/10 6:28:13

K8S OOM killer机制

当kubelet没来得及触发pod驱逐&#xff0c;使得节点内存耗尽时&#xff0c;将触发节点上的OOM killer机制&#xff1b; Linux上有个机制叫OOM killer&#xff08;Out Of Memory killer&#xff09;&#xff0c;这个机制会在系统内存耗尽的情况下发挥作用&#xff0c;即根据一定…...

编程日记 2024/12/10 6:26:11

什么是绩效文化？

绩效文化是一种组织文化&#xff0c;它将绩效视为核心价值观&#xff0c;贯穿于组织的各个层面和活动之中。 一、绩效文化的内涵 目标导向 绩效文化强调组织成员都朝着共同的目标努力。这个目标通常是明确、可衡量的&#xff0c;如企业的年度利润目标、市场份额增长目标等。例…...

编程日记 2024/12/10 6:25:11

【人工智能-CV领域】对抗生成网络（GAN）与扩散模型全面解析与深度融合：实现AI生成能力的新突破

文章目录 了解更多AI内容生成模型概述对抗生成网络&#xff08;GAN&#xff09;的深度解析GAN的基本原理GAN的损失函数GAN的优势与挑战 扩散模型&#xff08;Diffusion Model&#xff09;的深入探讨扩散模型的基本原理扩散模型的损失函数扩散模型的优势与挑战 GAN与扩散模型的全…...

编程日记 2024/12/10 6:24:09

IT系统运维监控指标体系-持续完善中

分类指标名称定义说明指标类型采集频率统计数据频率计量单位数据精度应用注册用户数统计当前注册用户总数量统计类1分钟分钟、小时、日个整数应用在线用户数统计当前在线用户总数量统计类1分钟分钟、小时、日个整数应用日登录人数统计当日登录用户总数量统计类1分钟分钟、小时、…...

编程日记 2024/12/10 6:23:08

RPC设计--TcpAcceptor

TcpAcceptor 其功能较为简单&#xff0c;把套接字通信的一整套流程封装起来。在构造函数中就创建好连接套接字、设置好端口复用&#xff0c;等待accept&#xff0c;即自己封装socket 、 bind等函数调用 传入本地要监听的地址和端口&#xff0c;完成上述流程。 可提供getList…...

编程日记 2024/12/10 6:22:07

openclaw-route-check：多协议路由诊断工具的原理、安装与实战应用

1. 项目概述与核心价值最近在折腾一些需要跨地域、跨网络环境访问的服务时&#xff0c;路由问题总是最让人头疼的环节。你可能也遇到过类似情况&#xff1a;明明服务部署在A地&#xff0c;从B地访问时延迟高得离谱&#xff0c;或者干脆时通时不通&#xff0c;排查起来像大海捞针…...

编程新知 2026/5/15 16:36:46

2026年3月 电子学会青少年软件编程机器人技术四级等级考试试卷真题【实际操作】

答案和更多内容请查看网站&#xff1a;【试卷中心 ----->电子学会 ---->机器人技术 ----> 四级】 网站链接 青少年软件编程历年真题模拟题实时更新 青少年机器人技术等级考试实际操作试卷&#xff08;四级&#xff09; 2026年3月 一、实操试题 主题&#xff1…...

编程新知 2026/5/15 16:24:16

Silk v3解码器终极指南：高效转换微信QQ语音为MP3格式

Silk v3解码器终极指南&#xff1a;高效转换微信QQ语音为MP3格式 【免费下载链接】silk-v3-decoder [Skype Silk Codec SDK]Decode silk v3 audio files (like wechat amr, aud files, qq slk files) and convert to other format (like mp3). Batch conversion support. 项目…...

编程新知 2026/5/15 15:31:44

如何5分钟快速提升GitHub访问速度：FastGithub完整配置指南

如何5分钟快速提升GitHub访问速度&#xff1a;FastGithub完整配置指南 【免费下载链接】FastGithub github定制版的dns服务&#xff0c;解析访问github最快的ip 项目地址: https://gitcode.com/gh_mirrors/fa/FastGithub GitHub作为全球开发者最常用的代码托管平台&…...

编程新知 2026/5/15 15:08:31

轻量级网页自动化工具 xiaoclaw：基于 CDP 的高效实践指南

1. 项目概述&#xff1a;一个轻量级、可编程的网页自动化工具最近在折腾一些需要自动处理网页数据的小项目&#xff0c;比如定时抓取某个网站的价格变动、自动填写表单、或者模拟一些重复性的点击操作。一开始想用传统的Selenium&#xff0c;但总觉得它有点“重”&#xff0c;启…...

编程新知 2026/5/15 14:11:41

Python小红书数据采集终极指南：xhs工具完整使用教程

Python小红书数据采集终极指南&#xff1a;xhs工具完整使用教程 【免费下载链接】xhs 基于小红书 Web 端进行的请求封装。https://reajason.github.io/xhs/ 项目地址: https://gitcode.com/gh_mirrors/xh/xhs 小红书作为中国领先的生活方式分享平台&#xff0c;蕴含着丰…...

编程新知 2026/5/15 10:37:10

Java动态代理终极指南：JDK与CGLIB原理对比详解

Java动态代理终极指南&#xff1a;JDK与CGLIB原理对比详解 【免费下载链接】CodeGuide :books: 本代码库是作者小傅哥多年从事一线互联网 Java 开发的学习历程技术汇总&#xff0c;旨在为大家提供一个清晰详细的学习教程&#xff0c;侧重点更倾向编写Java核心内容。如果本仓库能…...

编程新知 2026/5/15 10:33:04

The Most Dangerous Writing App 快速入门指南：如何在5秒内开始高效写作

The Most Dangerous Writing App 快速入门指南&#xff1a;如何在5秒内开始高效写作 【免费下载链接】themostdangerouswritingapp If you stop typing for more than five seconds, all progress will be lost. 项目地址: https://gitcode.com/gh_mirrors/th/themostdangero…...

编程新知 2026/5/15 9:19:50

【Midjourney API接入实战指南】：20年AI工程老兵亲授避坑清单与生产级部署Checklist

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney API接入实战导论 Midjourney 作为当前主流的文生图模型之一&#xff0c;官方并未开放标准 RESTful API&#xff0c;但可通过 Discord Bot 模拟交互、WebSocket 协议监听或第三方封装服务实…...

编程新知 2026/5/15 8:34:24

构建跨平台桌面自动化命令行技能集：从原理到Python实现

1. 项目概述&#xff1a;一个桌面操作员的命令行技能集 最近在整理自己的自动化工具箱时&#xff0c;我重新审视了一个名为 cua_desktop_operator_cli_skill 的项目。这个名字听起来有点长&#xff0c;但拆解一下就能明白它的核心价值&#xff1a;“CUA”通常指代一种通用的用…...

编程新知 2026/5/15 8:18:37