Base64 快速入门：原理、场景、格式和代码示例

反馈

Base64 是什么？为什么 Web 开发中到处都能看到 Base64？

Base64 是一种在前端、后端、网络传输、数据持久化中都极为常见的编码方式，尤其在 Web 开发中应用广泛，如图片转字符串、文件嵌入 HTML、API 数据传输等。本文将从原理到实际用途做一次完整介绍，用最清晰的方式告诉你：Base64 的原理、用途、优缺点、常见格式、Data URL 结构、各种实际案例，以及实用的 Base64 在线编解码工具。

适合人群： Web 开发者、前端工程师、后端工程师、对 Base64 感兴趣的用户。

0. 目录

  1. Base64 是什么？
  2. 为什么需要 Base64？
  3. Base64 的编码原理: 3 变 4 的魔术
  4. 常见 MIME 类型与 Data URL 结构
  5. Base64 的优缺点和常见用途
  6. Base64URL（URL 友好版）
  7. 常规语言 Base64 代码示例
  8. Base64 在线编解码工具推荐
  9. 常见问题 FAQ

1. Base64 是什么？

Base64 是一种将二进制数据（图片、文件、音频等）编码为可打印字符的方式。

它由以下字符组成：

Base64 标准字符表（RFC 4648）

索引 字符 索引 字符 索引 字符 索引 字符
0 A 16 Q 32 g 48 w
1 B 17 R 33 h 49 x
2 C 18 S 34 i 50 y
3 D 19 T 35 j 51 z
4 E 20 U 36 k 52 0
5 F 21 V 37 l 53 1
6 G 22 W 38 m 54 2
7 H 23 X 39 n 55 3
8 I 24 Y 40 o 56 4
9 J 25 Z 41 p 57 5
10 K 26 a 42 q 58 6
11 L 27 b 43 r 59 7
12 M 28 c 44 s 60 8
13 N 29 d 45 t 61 9
14 O 30 e 46 u 62 +
15 P 31 f 47 v 63 /

字符表中总计 64 个字符，因此叫 Base64（ 注：加上填充符号 = 其实是65个字符 O(∩_∩)O ）。

注意： Base64 不是加密，只是编码，任何人都可以还原原始数据。

2. 为什么需要 Base64？

Base64 的主要作用是：

1. 将无法直接放入文本的数据，变成可传输的字符格式

例如：图片、音频、PDF、zip 文件。

2. 可以内联到 HTML / CSS / JSON / XML / URL

常见格式：

data:image/png;base64,iVBORw0KGgoAAAANS...

3. 解决网络传输时字符不兼容的问题

很多协议只支持 文本，不支持传输二进制, 比如早期 Email 协议（MIME）早期浏览器、表单、URL、Cookie、JSON、XML、HTML的属性值等。

3. Base64 的编码原理: 3 变 4 的魔术

编码原理：

Base64的核心思想是将 3 个字节（3*8=24 位）拆成 4 组，每组 6 位（4*6=24 位）。每 6 位对应 Base64 字符表中的一个字符,若最后不足 3 字节，用 = 补位。

简而言之：将每3个原始字节的数据，转换为4个可打印字符。

示意图：

[8 bits][8 bits][8 bits]  →  [6 bits][6 bits][6 bits][6 bits]
           24 bits                    4 Base64

如果数据长度不是 3 的倍数，那么不足的部分会用 = 补充。

补充规则：

Base64 编码详解

1. 准备阶段：：原始数据（3个字节）

我们假设有一块由 3 个字节组成的原始数据。

示例： 假设原始数据是 ASCII 字符 "M", "a", "n"：

原始字符 ASCII 值 (十进制) 二进制表示 (8 bits)
M 77 01001101
a 97 01100001
n 110 01101110

将它们连接起来，形成一个 24 位的长串：

01001101 01100001 01101110 (Total: 24 bits)

2. 转换阶段：重新分组（24 位 -> 4 组 * 6 位）

Base64 的目标是使用 64 个字符，而 2^6 = 64。这意味着每个 Base64 字符只需要 6 位二进制数据来表示。

我们将上面 24 位的长串，按顺序重新划分为 4 个独立的 6 位数据块。

010011 010110 000101 101110

第 1 块： 010011 (6 bits)

第 2 块： 010110 (6 bits)

第 3 块： 000101 (6 bits)

第 4 块： 101110 (6 bits)

3. 编码阶段：查找字符表（4 组 * 6 位 -> 4 个字符）

现在，我们把这 4 个 6 位数据块转换成十进制数，然后去查找标准 Base64 字符表（索引 0-63）。

块号 6 位二进制 对应十进制值 查找 Base64 字符
1 010011 19 T
2 010110 22 W
3 000101 5 F
4 101110 46 u

最终编码结果： 3 个字节的 "Man" 经过 Base64 编码后，变成了 4 个字符的字符串 "TWFu"。

文本 M a n
ASCII编码 77 97 110
二进制位 0 1 0 0 1 1 0 1 0 1 1 0 0 0 0 1 0 1 1 0 1 1 1 0
索引 19 22 5 46
Base64编码 T W F u

Base64 填充（Padding）机制：当数据不足 3 字节时

如果原始数据的总字节数不是 3 的倍数，编码过程依然保持 8 bits -> 6 bits 的转换，但在末尾会通过补 0 来凑满 6 位的组，并使用 = 来标记填充。

1. 剩 2 个字节场景（需要 1 个 = 填充）
2. 剩 1 个字节场景（需要 2 个 = 填充）
文本（1 Byte） A
二进制位 0 1 0 0 0 0 0 1 0 0 0 0                        
二进制位（補0） 0 1 0 0 0 0 0 1 0 0 0 0 留空填充 留空填充
Base64编码 Q Q = =
文本（2 Byte） B C
二进制位 0 1 0 0 0 0 1 0 0 1 0 0 0 0 1 1 0 0            
二进制位（補0） 0 1 0 0 0 0 1 0 0 1 0 0 0 0 1 1 0 0 留空填充
Base64编码 Q k M =

编码举例：

原文 ASCII 码 Base64 结果
Man 77 97 110 TWFu
BC 66 67 QkM=
A 65 QQ==
hello 104 101 108 108 111 aGVsbG8=

4. 常见 MIME 类型 与 Data URL 结构

最常见的 Base64 URL 长这样：

data:[mime-type];base64,[Base64编码内容]

常用的数据类型 (MIME Types)

MIME Type 描述
image/png 便携式网络图形（PNG）。无损压缩，常用于图标和需要透明度的图片。
image/jpeg 联合图片专家组（JPEG）。有损压缩，常用于照片。
image/gif 图形交换格式（GIF）。支持动画和透明度（但不是全透明）。
image/svg+xml 可缩放矢量图形（SVG）。基于XML的矢量图。
image/webp WebP格式，谷歌开发，提供更小的文件尺寸。
text/plain 纯文本。
text/css 层叠样式表（CSS）文件。常用于将小段样式直接嵌入。
text/html HTML 文档。可以用来嵌入一个完整的网页。
text/javascript JavaScript 代码。常用于嵌入小的脚本片段。
audio/mpeg MP3 音频文件。
video/mp4 MP4 视频文件。
application/json JSON 格式数据。
application/xml XML 格式数据。
application/pdf PDF 文档。
application/octet-stream 默认的二进制类型。如果不知道确切的文件类型，可以使用这个。

举例：

图片 (PNG)
data:image/png;base64,iVBORw0KGgoAAAANS...
MP3 音频
data:audio/mpeg;base64,//uQxA...
PDF
data:application/pdf;base64,JVBERi0xLjQKJeLj...

这些都是浏览器常见的 MIME 类型（你可以覆盖几乎所有文件格式）。

5. Base64 的优缺点和常见用途

1. 优缺点

优点
缺点
适合：
不适合：

2. 常见用途

1. 图片内联（减少 HTTP 请求）

特别适合小图标、SVG、CSS Sprite 替代方案。浏览器可直接渲染，不需要文件 URL。

图片直接嵌入 HTML/CSS:

<img src="data:image/png;base64,xxxx">

作为CSS的背景图片:

background-image: url("data:image/svg+xml;base64,PHN2ZyB...=");
2. 文件上传前预览

使用 FileReader：

reader.readAsDataURL(file);

浏览器自动生成 Base64。

3. Web API、JSON 中传输文件

这样做无需 multipart/form-data，例如在 REST API (JSON / XML)或 GraphQL 上传文件。

4. 浏览器本地存储

本地存储 ( LocalStorage ) 只能存字符串，因此 Base64 非常适合。

5. 为音频、视频、PDF 做内嵌预览

无需外部链接。

6. 把文件存放在数据库中

二进制数据以文本形式存储，安全、简单，但占用空间大。

7. 简单的数据混淆

虽然不是加密，但Base64可以用于对一些轻量级配置或参数进行简单的混淆，避免数据被用户一眼看穿。

6. Base64 URL（URL 友好版）

普通 Base64 中：

+ /

在 URL 中有特殊含义。

Base64URL 替换规则：

+ → -
/ → _
= 可能被去掉

常用于：

例如：

abc+123/== → abc-123_

7. 常规语言 Base64 代码示例

1. JavaScript 中的 Base64 编解码

字符串
btoa("Hello")
btoa(unescape(encodeURIComponent("中文")))
decodeURIComponent(escape(atob(base64str)))

注意：btoa 只能接受 UTF-8 之前的 Latin1 字符，中文需要转码：

文件 / 图片（用于 file upload）
const reader = new FileReader();
reader.onload = () => {
  const base64 = reader.result;  // data:image/png;base64,AAAB...
};
reader.readAsDataURL(file);

2. PHP 中的 Base64 编解码

base64_encode($data);
base64_decode($data);

3. Python 中的 Base64 编解码

import base64
base64.b64encode(b"hello")
base64.b64decode("aGVsbG8=")

4. C++ ( C++17 ) 中的 Base64 编解码

// 常用库: cppcodec / OpenSSL / Boost
#include <cppcodec/base64_rfc4648.hpp>

string encoded = base64::encode("hello");
string decoded = base64::decode(encoded);

8. Base64 在线编解码工具推荐

为了更高效地处理 Base64 字符串，你可以使用本站提供的 在线 Base64 编解码工具（支持文本/图片/音视频/任意文件），纯前端 · 基于 Bootstrap · 安全无上传 · 隐私100%本地处理。

工具主要功能

功能类型 说明
文本 Base64 编码/解码 输入文本即可即时转换
图片 Base64 编码/解码 支持 PNG/JPEG/GIF/WebP
音频/视频 Base64 编码 支持 MP3/MP4/WAV 等
任意文件 Base64 编码 PDF、ZIP、文档均可
Base64 还原文件（Blob） 将 Base64 转为可下载的文件
多端适配 支持电脑与手机使用
纯前端运行 文件不会上传到服务器

9. 常见问题 FAQ

1. Base64 是加密吗？

不是！ 任何 Base64 字符串都可以轻松反解，安全性极低。

2. Base64 是否比二进制“更小”？

会变大 33%。

3. 大图适合用 Base64 吗？

不适合。会造成网页加载慢、DOM 变大。

4. 为什么 data:image/png;base64, 开头？

因为 Data URL 格式规定必须先写 MIME 类型。

5. Base64 与 URL-safe Base64 区别？

URL-safe Base64 会将以下替换：

用于 JWT、OAuth 等。