Base64 概念、原理、使用场景

最新推荐文章于 2025-04-17 08:51:36 发布

mx_2022

最新推荐文章于 2025-04-17 08:51:36 发布

阅读量1.6k

点赞数 15

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/mx_2022/article/details/144747330

版权

Base概念

Base64 是一种基于 64 个字符的编码方式，用于将二进制数据表示为 ASCII 字符串。它常用于数据在文本环境（如 HTTP、邮件等）中的传输和存储。

Base64 编码的原理

字符集：
Base64 使用以下 64 个字符进行编码：
```
A-Z, a-z, 0-9, +, /
```
还会使用 = 作为填充字符（Padding）。
编码过程：
- 将输入的二进制数据每 3 字节（24 位）一组进行分割。
- 将 24 位分为 4 个 6 位的组，每个组映射到一个 Base64 字符。
- 如果数据长度不是 3 字节的倍数，补齐成 3 字节（1 字节补 2 个 =，2 字节补 1 个 =）。
示例：
- 输入：Man
- 二进制表示：01001101 01100001 01101110
- 按 6 位分组：010011 010110 000101 101110
- 映射字符：TWFu

Base64 的优点

跨平台传输：
将二进制数据转为文本字符串，方便通过文本协议（如 HTTP、邮件）传输。
通用性强：
所有现代编程语言都支持 Base64 的编码和解码。
字符安全：
Base64 编码的字符都是可打印的 ASCII 字符，不会受到字符集和转义符的干扰。

Base64 的缺点

数据膨胀：
编码后的数据比原始数据大约多 33%（3 字节编码为 4 字符）。
不适合大数据传输：
Base64 编码对大文件或大量数据传输效率较低。
不加密：
Base64 并非加密算法，编码后的数据仍然容易被解码，因此不能用于数据保护。

Base64 的常用场景

前后端通信：
- 传递二进制数据（如图片、文件、音视频）。
- 将二进制数据嵌入 JSON、XML 或 HTML 文档中。
数据嵌入：
- 用于嵌入图片的 Base64 表示，如 CSS 或 HTML 中的 data: URI。
- 示例：
```
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">
```
数据存储：
- 在数据库中存储二进制文件（如文件、图像）时，使用 Base64 编码将其保存为文本。
网络协议：
- HTTP 的 Basic Auth 使用 Base64 编码用户名和密码。
- 邮件协议（如 MIME）中将附件数据编码为 Base64。

前后端中的 Base64 示例

前端编码与解码

浏览器环境：

// 编码
const encoded = btoa('Hello, Base64!');
console.log(encoded); // 输出：SGVsbG8sIEJhc2U2NCE=

// 解码
const decoded = atob(encoded);
console.log(decoded); // 输出：Hello, Base64!

处理 Unicode 字符：

const utf8ToBase64 = (str) =>
  btoa(unescape(encodeURIComponent(str)));
const base64ToUtf8 = (base64) =>
  decodeURIComponent(escape(atob(base64)));

const encoded = utf8ToBase64('你好，Base64！');
console.log(encoded); // 输出：5L2g5aW9LCDmlrDpm4LliqDlroE=

const decoded = base64ToUtf8(encoded);
console.log(decoded); // 输出：你好，Base64！

后端编码与解码（Node.js 环境）

// 编码
const buffer = Buffer.from('Hello, Base64!', 'utf-8');
const base64 = buffer.toString('base64');
console.log(base64); // 输出：SGVsbG8sIEJhc2U2NCE=

// 解码
const decodedBuffer = Buffer.from(base64, 'base64');
console.log(decodedBuffer.toString('utf-8')); // 输出：Hello, Base64!