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

HTTP multipart/form-data 请求

news 2025/12/25 4:54:57

序言

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

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/12/23 2:34:17

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/11/27 17:18:52

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/12/17 7:38:30

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/12/24 22:20:18

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2025/12/25 1:15:07

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...

编程新知 2025/8/18 19:05:00

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙：被低估的"智能安检员"二、优先尝试！90%问题无需关闭防火墙方案1：程序白名单（解决软件误拦截）方案2：开放特定端口（解决网游/开发端口不通）三、命令行极速关闭方案方法一：PowerShell（推荐Win10/11）​方法二：CMD命令…...

编程新知 2025/8/27 20:07:03

Mac flutter环境搭建

一、下载flutter sdk 制作 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 1、查看mac电脑处理器选择sdk 2、解压 unzip ~/Downloads/flutter_macos_arm64_3.32.2-stable.zip \ -d ~/development/ 3、添加环境变量 命令行打开配置环境变量文件 ope…...

编程新知 2025/12/15 14:52:10

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2025/12/17 5:31:33