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

再学http-为什么文件上传要转成Base64？

news 2025/8/26 6:54:36

1 前言

最近在开发中遇到文件上传采用Base64的方式上传，记得以前刚开始学http上传文件的时候，都是通过content-type为multipart/form-data方式直接上传二进制文件，我们知道都通过网络传输最终只能传输二进制流，所以毫无疑问他们本质上都是一样的，那么为什么还要先转成Base64呢？这两种方式有什么区别？带着这样的疑问我们一起来分析下。

2 multipart/form-data上传

先来看看multipart/form-data的方式，我在本地通过一个简单的例子来查看http multipart/form-data方式的文件上传，html代码如下

 

html
 

复制代码
 

<!DOCTYPE html> <html> <head> <title>上传文件示例</title> <meta charset="UTF-8"> <body> <h1>上传文件示例</h1> <form action="/upload" method="POST" enctype="multipart/form-data"> <label for="file">选择文件：</label> <input type="file" id="file" name="file"><br> <label for="tx">说明：</label> <input type="text" id="tx" name="remark"><br><br> <input type="submit" value="上传"> </form> </body> </html> 
 

页面展示也比较简单
 

 

image.png
 

选择文件点击上传后，通过edge浏览器f12进入调试模式查看到的请求信息。
 请求头如下
 

image.png
 

在请求头里Content-Type 为 multipart/form-data; boundary=----WebKitFormBoundary4TaNXEII3UbH8VKo，刚开始看肯定有点懵，不过其实也不复杂，可以简单理解为在请求体里要传递的参数被分为多部份，每一部分通过分解符boundary分割，就比如在这个例子，表单里有file和remark两个字段，则在请求体里就被分为两部分，每一部分通过boundary=----WebKitFormBoundary4TaNXEII3UbH8VKo来分隔（实际上还要加上CRLF回车换行符，回车表示将光标移动到当前行的开头，换行表示一行文本的结束，也就是新文本行的开始）。需要注意下当最后一部分结尾时需要加多两个"-"结尾。
 我们继续来看请求体
 

 

image.png
 

第一部分是file字段部分，它的Content-Type为image/png，第二部分为remark字段部分，它没有声明Content-Type，则默认为text/plain纯文本类型，也就是在例子中输入的“测试”，到这里大家肯定会有个疑问，上传的图片是放在哪里的，这里怎么没看到呢？别急，我猜测是浏览器做了特殊处理，请求体里不显示二进制流，我们通过Filder抓包工具来验证下。
 

 

image.png
 

可以看到在第一部分有一串乱码显示，这是因为图片是二进制文件，显示成文本格式自然就乱码了，这也证实了二进制文件也是放在请求体里。后端使用框架springboot通过MultipartFile接受文件也是解析请求体的每一部分最终拿到二进制流。
 

 

java
 

复制代码
 

@RestController public class FileController { // @RequestParam可接收Content-Type 类型为：multipart/form-data  // 或 application/x-www-form-urlencoded 请求体的内容 @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) { return "test"; } } 
 

到此multipart/form-data方式上传文件就分析完了，关于multipart/form-data官方说明可参考 RFC 7578 - Returning Values from Forms: multipart/form-data (ietf.org)
 

3 Base64上传
 

在http的请求方式中，文件上传只能通过multipart/form-data的方式上传，这样一来就会有比较大的限制，那有没其他方式可以突破这一限制，也就是说我可以通过其他的请求方式上传，比如application/json？当然有，把文件当成一个字符串，和其他普通参数没什么两样，我们可以通过其他任意请求方式上传。如果转成了字符串，那上传文件就比较简单了，但问题是我们怎么把二进制流转成字符串，因为这里面可能会有很多“坑”，业界一般的做法是通过Base64编码把二进制流转成字符串，那为什么不直接转成字符串而要先通过Base64来转呢？我们下面来分析下。
 

3.1 Base64编码原理
 

在分析原理之前，我们先来回答什么是Base64编码？首先我们要知道Base64只是一种编码方式，并不是加解密算法，因此Base64可以编码，那也可以解码，它只是按照某种编码规则把一些不可显示字符转成可显示字符。这种规则的原理是把要编码字符的二进制数每6位分为一组，每一组二进制数可对应Base64编码的可打印字符，因为一个字符要用一个字节显示，那么每一组6位Base64编码都要在前面补充两个0，因此总长度比编码前多了(2/6) = 1/3，因为6和8最小公倍数是24，所以要编码成Base64对字节数的要求是3的倍数（24/8=3字节），对于不足字节的需要在后面补充字节数，补充多少个字节就用多少个"="表示（一个或两个），这么说有点抽象，我们通过下面的例子来说明。
 我们对ASCII码字符串"AB\nC"(\n和LF都代表换行)进行Base64编码，因为一共4字节，为了满足是3的倍数需要扩展到6个字节，后面补充了2个字节。
 

 

image.png
 

表3.1
 

转成二级制后每6位一组对应不同颜色，每6位前面补充两个0组成一个字节，最终Base64编码字符是QUIKQw==，Base64编码表大家可以自行网上搜索查看。
 

 

image.png
 

我们通过运行程序来验证下
 

 

image.png
 

最终得出的结果与我们上面推理的一样。
 

3.2 Base64编码的作用
 

在聊完原理之后，我们继续来探讨文件上传为什么要先通过Base64编码转成字符串而不直接转成字符串？一些系统对特殊的字符可能存在限制或者说会被当做特殊含义来处理，直接转成普通字符串可能会失真，因此上传文件要先转成Base64编码字符，不能把二进制流直接字符串。
 

另外，相比较multipart/form-data Base64编码文件上传比较灵活，它不受请求类型的限制，可以是任何请求类型，因为最终就是一串字符串，相当于请求的一个参数字段，它不像二进制流只能限定multipart/form-data的请求方式，日常开发中，我们用的比较多的是通过apllication/json的格式把文件字段放到请求体，这种方式提供了比较便利的可操作性。
 

4 总结
 

本文最后再来总结对比下这两种文件上传的方式优缺点。
 （1）multipart/form-data可以传输二进制流，效率较高，Base64需要编码解码，会耗费一定的性能，效率较低。
 （2）Base64不受请求方式的限制，灵活度高，http文件二进制流方式传输只能通过multipart/form-data的方式，灵活度低。
 因为随着机器性能的提升，小文件通过二进制流传输和字符串传输，我们对这两种方式时间延迟的感知差异并不那么明显，因此大部分情况下我们更多考虑的是灵活性，所以采用Base64编码的情况也就比较多。
 















相关文章：
















再学http-为什么文件上传要转成Base64？




1 前言 
最近在开发中遇到文件上传采用Base64的方式上传&#xff0c;记得以前刚开始学http上传文件的时候&#xff0c;都是通过content-type为multipart/form-data方式直接上传二进制文件&#xff0c;我们知道都通过网络传输最终只能传输二进制流&#xff0c;所以毫无疑问他们本…...






编程日记
2023/8/27 22:56:35



















使用oracleVM搭建虚拟机




选择新建&#xff0c;点击 取名字&#xff0c;选择你的安装路径&#xff0c;选择你爹镜像光盘&#xff0c;再勾选下面的&#xff0c;表示跳过一些步骤 其他的都可以默认&#xff0c;下一步即可 创建好了&#xff0c;点击设置&#xff0c;改变光驱&#xff0c;硬盘的顺序 等待它…...






编程日记
2023/8/27 22:55:34



















深入探讨C存储类和存储期——Storage Duration




&#x1f517; 《C语言趣味教程》&#x1f448; 猛戳订阅&#xff01;&#xff01;&#xff01; ​—— 热门专栏《维生素C语言》的重制版 —— 
&#x1f4ad; 写在前面&#xff1a;这是一套 C 语言趣味教学专栏&#xff0c;目前正在火热连载中&#xff0c;欢迎猛戳订阅&#…...






编程日记
2023/8/27 22:54:33



















医学图像融合的深度学习方法综述




文章目录 Deep learning methods for medical image fusion: A review摘要引言非端到端的融合方法基于深度学习的决策映射基于深度学习的特征提取 端到端图像融合方法基于卷积神经网络(CNN)的图像融合方法单级特征融合方法多级特征融合基于残差神经网络的图像融合方法基于密集神…...






编程日记
2023/8/27 22:53:31



















【Qt学习】04：QDialog




QDialog OVERVIEW QDialog一、自定义对话框1.模态对话框2.非模态对话框3.练习代码 二、标准对话框1.消息对话框2.文件对话框3.颜色对话框4.字体对话框 对话框是 GUI 程序中不可或缺的组成部分&#xff0c;对话框通常会是一个顶层窗口出现在程序最上层&#xff0c;用于实现短期任…...






编程日记
2023/8/27 22:52:26



















如何更好的进行异常处理




背景 在实际开发中&#xff0c;我们都希望程序可以一直按照期望的流程&#xff0c;无误的走下去。但是由于不可避免的内外部因素&#xff0c;可能导致出现异常的情况&#xff0c;轻则导致报错&#xff0c;重则数据错乱、服务不可用等情况。严重影响系统的稳定性&#xff0c;甚至…...






编程日记
2023/8/27 22:51:25



















若依微服务版部署到IDEA




1.进入若依官网&#xff0c;找到我们要下的微服务版框架 2.点击进入gitee,获取源码&#xff0c;下载到本地 3.下载到本地后&#xff0c;用Idea打开&#xff0c;点击若依官网&#xff0c;找到在线文档&#xff0c;找到微服务版本的&#xff0c;当然你不看文档&#xff0c;直接按…...






编程日记
2023/8/27 22:50:24



















Elasticsearch 入门安装




1.Elasticsearch 是什么 The Elastic Stack, 包括 Elasticsearch、 Kibana、 Beats 和 Logstash&#xff08;也称为 ELK Stack&#xff09;。能够安全可靠地获取任何来源、任何格式的数据&#xff0c;然后实时地对数据进行搜索、分析和可视化。 
Elaticsearch&#xff0c;简称为…...






编程日记
2023/8/27 22:49:23



















【80天学习完《深入理解计算机系统》】第十一天 3.5 过程（函数调用）




专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09; 　 文章字体风格&#xff1a; 红色文字表示&#…...






编程日记
2023/8/27 22:48:22



















LinuxUbuntu安装VMware tools Segmentation fault (core dumped)怎么解决




LinuxUbuntu安装VMware tools Segmentation fault (core dumped)怎么解决 
在安装VMware Tools时遇到"Segmentation fault (core dumped)"错误&#xff0c;通常是由于兼容性问题或系统配置不正确导致的。以下是一些可能的解决方法&#xff1a; 检查VMware Tools兼容性…...






编程日记
2023/8/27 22:47:20



















002微信小程序云开发API数据库-迁移状态查询/更新索引




文章目录 微信小程序云开发API数据库-迁移状态查询案例代码微信小程序云开发API数据库-更新索引案例代码 微信小程序云开发API数据库-迁移状态查询 
在微信小程序中&#xff0c;云开发API数据库是一种方便快捷的数据库解决方案。但是&#xff0c;有时候我们可能需要将云开发数据…...






编程日记
2023/8/27 22:46:19



















十几款拿来就能用的炫酷表白代码




「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;小白零基础《Python入门到精通》 表白代码 1、坐我女朋友好吗&#xff0c;不同意就关机.vbs2、坐我女朋友好吗&…...






编程日记
2023/8/27 22:45:18



















证券低延时环境设置并进行性能测试




BIOS设置BIOS参考信息 关闭 logical Process Virtualization Technology 在System Profiles Settings 中System Profile 选择Performance Workload Profile 选择HPC Profile OS中信息参考在/etc/default/grub文件中添加 intel_idle.max_cstate=0 processor.max_cstate=0 idle=p…...






编程日记
2023/8/27 22:44:17



















百度工程师浅析解码策略




作者 | Jane 导读 生成式模型的解码方法主要有2类&#xff1a;确定性方法&#xff08;如贪心搜索和波束搜索&#xff09;和随机方法。确定性方法生成的文本通常会不够自然&#xff0c;可能存在重复或过于简单的表达。而随机方法在解码过程中引入了随机性&#xff0c;以便生成更…...






编程日记
2023/8/27 22:43:15



















windows下实现查看软件请求ip地址的方法




一、关于wmic和nestat wmic是Windows Management Instrumentation的缩写&#xff0c;是一款非常常用的用于Windows系统管理的命令行实用程序。wmic可以通过命令行操作&#xff0c;获取系统信息、安装软件、启动服务、管理进程等操作。 netstat命令是一个监控TCP/IP网络的非常有…...






编程日记
2023/8/27 22:42:14



















【JAVA】String 类




⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; String 1. 字符串构造2. String对象的比…...






编程日记
2023/8/27 22:41:12



















LoRA继任者ReLoRA登场，通过叠加多个低秩更新矩阵实现更高效大模型训练效果




论文链接&#xff1a; https://arxiv.org/abs/2307.05695 代码仓库&#xff1a; https://github.com/guitaricet/peft_pretraining 一段时间以来&#xff0c;大模型&#xff08;LLMs&#xff09;社区的研究人员开始关注于如何降低训练、微调和推理LLMs所需要的庞大算力&#xf…...






编程日记
2023/8/27 22:40:11



















Elasticsearch 8.X reindex 源码剖析及提速指南




1、reindex 源码在线地址 为方便大家验证&#xff0c;这里给出 reindex github 源码地址。 https://github.com/elastic/elasticsearch/blob/001fcfb931454d760dbccff9f4d1b8d113f8708c/server/src/main/java/org/elasticsearch/index/reindex/ReindexRequest.java reindex 常见…...






编程日记
2023/8/27 22:39:10



















前端组件库造轮子——Input组件开发教程




前端组件库造轮子——Input组件开发教程 
前言 
本系列旨在记录前端组件库开发经验&#xff0c;我们的组件库项目目前已在Github开源&#xff0c;下面是项目的部分组件。文章会详细介绍一些造组件库轮子的技巧并且最后会给出完整的演示demo。 文章旨在总结经验&#xff0c;开源…...






编程日记
2023/8/27 22:38:08



















Day04-Vue基础-监听器-双向绑定-组件通信




Day04-Vue基础-监听器-双向绑定-组件通信 
一 侦听器 
语法一 
<template><div>{{name}}<br><button @click="update1">修改1</button><...






编程日记
2023/8/27 22:37:07





















uniapp 对接腾讯云IM群组成员管理（增删改查）




UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 
一、前言 
在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 
权限校验…...






编程新知
2025/7/9 0:22:36



















深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录




ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 
ASP.NET Core 中的日志记录 
.NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...






编程新知
2025/8/25 9:13:59



















前端倒计时误差!




提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 
前几天听说公司某个项…...






编程新知
2025/7/13 22:34:29



















生成 Git SSH 证书




&#x1f511; 1. ​​生成 SSH 密钥对​​ 
在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; 
ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 
​​参数说明​​&#xff1a; -t rsa&#x…...






编程新知
2025/8/6 2:29:59



















06 Deep learning神经网络编程基础 激活函数 --吴恩达




深度学习激活函数详解 
一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid  σ ( x ) = 1 1 +...






编程新知
2025/7/6 11:42:31



















零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）




本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...






编程新知
2025/8/22 3:34:06



















【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习




禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...






编程新知
2025/8/26 6:37:34



















网站指纹识别




网站指纹识别 
网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 
为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...






编程新知
2025/8/22 4:32:31



















A2A JS SDK 完整教程：快速入门指南




目录 
什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 
什么是 A2A JS SDK? 
A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...






编程新知
2025/6/18 3:11:41



















【笔记】WSL 中 Rust 安装与测试完整记录




#工作记录 WSL 中 Rust 安装与测试完整记录 
1. 运行环境 
系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 
2.1 使用 Rust 官方安…...






编程新知
2025/8/25 17:02:52