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

HTTP multipart/form-data 请求

news 2026/3/30 11:02:06

序言

 最近在写项目的过程中有一个需求是利用 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

SpringBoot+Mybatis多数据源实战：TDengine与MySQL混搭的物联网数据存储方案

SpringBootMybatis多数据源实战&#xff1a;TDengine与MySQL混搭的物联网数据存储方案 在物联网系统开发中&#xff0c;数据存储架构的设计往往面临一个核心矛盾&#xff1a;海量设备时序数据的高效存储与业务数据的复杂关系处理如何平衡&#xff1f;传统单一数据库方案要么在时…...

编程新知 2026/3/30 9:47:56

如何完美解决MacBook触控板在Windows的三指拖动难题

如何完美解决MacBook触控板在Windows的三指拖动难题 【免费下载链接】ThreeFingersDragOnWindows Enables macOS-style three-finger dragging functionality on Windows Precision touchpads. 项目地址: https://gitcode.com/gh_mirrors/th/ThreeFingersDragOnWindows …...

编程新知 2026/3/30 9:37:52

3D Face HRN真实案例：用于司法鉴定中面部特征三维比对辅助系统

3D Face HRN真实案例&#xff1a;用于司法鉴定中面部特征三维比对辅助系统 1. 引言&#xff1a;从平面照片到三维证据的突破 在司法鉴定领域&#xff0c;面部特征比对一直是身份识别的重要技术手段。传统的2D照片比对方法存在角度、光照、表情等多重限制&#xff0c;往往难以…...

编程新知 2026/3/30 9:35:52

Qwen2.5-72B-Instruct-GPTQ-Int4部署教程：vLLM与HuggingFace Transformers对比

Qwen2.5-72B-Instruct-GPTQ-Int4部署教程&#xff1a;vLLM与HuggingFace Transformers对比 1. 模型简介 Qwen2.5-72B-Instruct-GPTQ-Int4是Qwen大语言模型系列的最新版本&#xff0c;具有720亿参数规模。相比前代Qwen2&#xff0c;这个版本在多个方面实现了显著提升&#xff…...

编程新知 2026/3/30 8:51:34

3个超实用方法：115proxy-for-Kodi插件实现云端视频流畅播放完全指南

3个超实用方法&#xff1a;115proxy-for-Kodi插件实现云端视频流畅播放完全指南 【免费下载链接】115proxy-for-kodi 115原码播放服务Kodi插件 项目地址: https://gitcode.com/gh_mirrors/11/115proxy-for-kodi 你是否曾因115网盘中的高清视频无法在Kodi上流畅播放而困扰…...

编程新知 2026/3/30 8:51:34

Sentinel-1A极化矩阵处理实战：用SNAP生成C2矩阵的7个关键参数解析与效果对比

Sentinel-1A极化矩阵处理实战&#xff1a;用SNAP生成C2矩阵的7个关键参数解析与效果对比 当处理Sentinel-1A极化SAR数据时&#xff0c;C2矩阵的生成质量直接影响后续地物分类、变化检测等应用的精度。许多初学者在使用SNAP的Polarimetric-Matrices算子时&#xff0c;往往直接采…...

编程新知 2026/3/30 6:42:53

手把手教你用Proteus仿真51单片机与74HC164：从电路搭建到代码调试全流程

从零开始掌握Proteus仿真51单片机与74HC164的完整指南 在电子设计自动化领域&#xff0c;Proteus作为一款功能强大的电路仿真软件&#xff0c;为初学者提供了无与伦比的学习体验。特别是对于51单片机与74HC164这类经典组合的仿真学习&#xff0c;能够帮助工程师和学生以零成本、…...

编程新知 2026/3/30 4:27:37

OpenClaw多通道管理：百川2-13B-4bits量化模型同时接入飞书与钉钉

OpenClaw多通道管理&#xff1a;百川2-13B-4bits量化模型同时接入飞书与钉钉 1. 为什么需要多通道管理&#xff1f; 上个月我遇到一个尴尬场景&#xff1a;团队部分成员用飞书沟通&#xff0c;另一部分用钉钉。当我尝试用OpenClaw搭建自动化助手时&#xff0c;不得不在两个平…...

编程新知 2026/3/30 4:19:28

深入解析DHT11单总线通信：如何通过时序控制实现稳定数据传输？

1. DHT11单总线通信的基本原理 第一次用DHT11传感器时&#xff0c;我被它只用一根线就能传数据惊到了。这就像两个人打电话&#xff0c;不需要复杂的线路&#xff0c;只要一根电话线就能聊天气温湿度。DHT11采用的单总线协议&#xff08;1-Wire Protocol&#xff09;就是这样一…...

编程新知 2026/3/30 3:28:51

Kylin V10 SP1桌面美化全攻略：从默认主题到个性化定制，让你的麒麟系统焕然一新

Kylin V10 SP1桌面美学革命&#xff1a;打造高效与美感兼具的麒麟系统工作空间 第一次打开Kylin V10 SP1系统时&#xff0c;那个默认的"寻光"主题确实给人一种清新简洁的感觉。但日复一日面对相同的界面&#xff0c;就像每天穿着同样的衣服上班——功能上没问题&…...

编程新知 2026/3/30 2:24:33