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

HTTP multipart/form-data 请求

news 2025/9/16 18:22:28

序言

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

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/9/16 1:43:02

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/8/12 18:09:54

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/7/8 4:43:23

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/9/2 4:01:22

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/9/13 22:56:28

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/9/2 19:12:26

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/9/15 21:14:54

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/9/13 0:08:57

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/9/9 10:10:40