🍃说说Base64

前言

前段时间写 JWT 的时候提到了 Base64,就想着单独写一篇文章说说它

本文就来说说 Base64 相关的知识。

看完你将可以用自己的语言向别人解释:【啥是 Base64?】

正文

一、初印象

Base64 是一种用 64 个字符 来表示二进制数据的编码方式。

简单来说,Base64 的主要作用是: 将那些"不可见"的二进制数据(如图片、文件、加密数据)转换成"纯文本"字符,以便在只支持文本的环境(如电子邮件、HTML、URL)中安全传输。

它常用于:数据 URL、JSON 中嵌入二进制数据等场景,下面就举个 🌰!

二、Base64 的应用

想象你要通过一个只支持纯文本的 JSON API,上传一张图片到服务器。

直接的问题:

  • JSON 是文本格式,无法直接处理二进制数据
  • 图片二进制数据包含的控制字符(如 NULL、换行)会破坏 JSON 结构,导致解析错误

Base64 的解决方案:

  1. 将图片二进制数据"编码"成只用 A-Z, a-z, 0-9, +, / 这 64 个安全字符组成的纯文本字符串
  2. 将这个字符串作为 JSON 的一个字段值安全传输:{"image": "iVBORw0KGgoAAAANSUh..."}
  3. 服务器收到后,将 Base64 字符串"解码"回原始二进制数据,保存为图片文件

这样,二进制数据就能在文本协议中安全、可靠地传输,不会丢失或损坏任何信息。

三、工作流程【原理相关,不感兴趣的可以跳过!!】

Base64 的编码过程可以概括为三个步骤:

首先,将二进制数据按每 3 个字节(24 位) 为一组进行划分。

接着,将这 24 位数据重新划分为 4 个 6 位 的数据块(因为 (2^6 = 64),正好可以用 64 个字符表示)。

然后,将每个 6 位的数据块转换为对应的 Base64 字符(根据 Base64 索引表)。

最后,如果原始数据长度不是 3 的倍数,需要进行填充处理,用 = 字符补足。

下面还是用图来表示一下会比较清晰 👇👇:

ok,这就上图!!

text 复制代码
【原始二进制数据】
01001001 00100001 01111001  (3字节 = 24位)
    ↓
【重新分组为6位一组】
010010 010010 000101 111001 (4组 × 6位 = 24位)
    ↓
【转换为Base64字符】
18     18     5      57     (十进制值)
S      S      F      5      (Base64字符)
    ↓
【结果】
SSF5

Base64 索引表:

ini 复制代码
0-25:  A-Z      (A=0, B=1, ..., Z=25)
26-51: a-z      (a=26, b=27, ..., z=51)
52-61: 0-9      (0=52, 1=53, ..., 9=61)
62:    +
63:    /
填充:  =

四、关于 Base64 的常见疑问

🤔 疑问:Base64 是加密吗? 不是!Base64 只是一种编码 (Encoding),不是加密(Encryption)。

  • 编码:目的是转换格式,任何人都可以解码还原
  • 加密:目的是保护数据,需要密钥才能解密

🤔 疑问:Base64 会让数据变大吗? 会的!因为每 3 字节的二进制数据会变成 4 个 ASCII 字符,所以数据大小会增加约 33%

🤔 疑问:为什么有时看到 Base64 末尾有 = 这是填充字符。当原始数据长度不是 3 的倍数时,用 = 补足,确保编码后的长度是 4 的倍数。

实际例子

Base64 编码就是把二进制数据(比如 ASCII 码)转换成可打印的字母。

例子:"Hi!"

  1. 转二进制

    H (72) → 01001000

    i (105) → 01101001

    ! (33) → 00100001

    合起来:01001000 01101001 00100001

  2. 6 位一组 (原来 8 位一组)
    010010 000110 100100 100001

  3. 转成字符 (查 Base64 表)

    18 → S,6 → G,36 → k,33 → h

  4. 结果
    "SGkh"

简短总结 :把数据按 6 位重新分组,每 6 位对应一个字母,最后可能加 = 补足长度。

最后

回到开头的问题:啥是 Base64?

Base64 是一种将二进制数据编码成纯文本的规则,它使用 64 个安全字符(A-Z, a-z, 0-9, +, /)来表示原始数据。

主要解决的是在文本协议中安全传输二进制数据的问题,但需要注意的是它会增加数据大小,且 ⚠️ 不具备加密功能!!⚠️ 不具备加密功能!!⚠️ 不具备加密功能!!!!!!

下次当你看到以 data:image/png;base64, 开头的长字符串时,就知道这是用 Base64 编码的图片数据了!

相关链接

相关推荐
ze_juejin2 小时前
Node.js 全局变量完整总结
前端
ttyyttemo2 小时前
Learn-Jetpack-Compose-By-Example---TextFieldValue
前端
_AaronWong2 小时前
多页面应用登录状态共享:基于弹出窗口的通用解决方案
前端·javascript·vue.js
六月的可乐2 小时前
Vue接入AI聊天助手实战
前端·vue.js·人工智能
degree5202 小时前
Webpack 与 Vite 构建速度对比:冷启动、HMR、打包性能实测分析
前端
猩猩程序员2 小时前
下一版本 MCP 协议将于2025年11月25日发布
前端
熊猫_豆豆2 小时前
用MATLAB画一只可爱的小熊
前端·matlab·画图
凯哥19702 小时前
Vue 3 + Supabase 认证与授权时序最佳实践指南
前端·后端