Base64 文件转换器：将任意文件编码为 Base64 字符串

什么是 Base64 文件编码？

Base64 编码将二进制文件数据转换为 ASCII 文本字符。这使得可以直接在 HTML、CSS、JavaScript、JSON 和 XML 等基于文本的格式中嵌入二进制文件（图像、PDF、字体、音频）——而原始二进制数据在这些格式中无效或会导致解析问题。

为什么对文件使用 Base64？

HTML/CSS 中的数据 URL

直接嵌入图像，无需单独的 HTTP 请求：

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

.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxu...');
}

电子邮件附件（MIME）

电子邮件使用 Base64 在 MIME 多部分格式中编码附件，因为电子邮件协议最初仅设计用于 7 位 ASCII 文本。

JSON API 负载

在 JSON API 中传输文件内容，无需单独的文件上传端点：

{
  "filename": "report.pdf",
  "content": "JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3Ro...",
  "encoding": "base64"
}

在数据库中存储二进制数据

某些数据库字段将二进制数据存储为文本列中的 Base64 编码字符串，特别是在没有二进制列类型或不实用时。

Base64 的工作原理

Base64 使用 64 个字符：A-Z、a-z、0-9、+、/ 以及用于填充的 =。

编码过程：

1. 取 3 字节（24 位）的二进制数据
2. 分成四个 6 位组
3. 将每个 6 位值映射到一个 Base64 字符
4. 如果输入不能被 3 整除，则添加 = 填充

大小影响：Base64 使文件大小增加约 33%（每 3 字节输入产生 4 个字符，或每 6 位输入产生 8 位）。

Base64 变体

标准 Base64

使用 + 和 / 作为第 62 和 63 个字符。使用 = 填充。

URL 安全 Base64

将 + 替换为 -，将 / 替换为 _，以避免 URL 编码问题。用于 JWT 令牌、URL 参数和文件名。

无填充 Base64

某些系统省略末尾的 = 填充。Node.js 的 base64url 编码就是这样做的。

常见文件类型和数据 URL

性能考量

使用数据 URL 嵌入的优点

• 消除对嵌入资源的 HTTP 请求
• 适用于关键渲染路径中的小图像
• 无需服务器即可离线/在本地文件中工作

使用数据 URL 嵌入的缺点

• 每个嵌入文件使 HTML/CSS 文件大小增加 33%
• 浏览器无法独立缓存资源
• 较大的负载可能减慢初始页面渲染
• 文本文件中的二进制数据使版本控制差异更困难

经验法则：对小于 5KB 的小资源使用 Base64 数据 URL。对于较大的文件，保持为单独的资产。

编程方式编码文件

Node.js

const fs = require('fs');
const fileData = fs.readFileSync('image.png');
const base64 = fileData.toString('base64');
const dataUrl = `data:image/png;base64,${base64}`;

Python

import base64
with open('image.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('utf-8')
data_url = f'data:image/png;base64,{encoded}'

浏览器 (FileReader API)

const reader = new FileReader();
reader.onload = (e) => console.log(e.target.result); // data URL
reader.readAsDataURL(file);

使用 Base64 文件转换器工具

我们的工具提供：

1. 拖放文件上传 — 接受任何文件类型
2. 即时 Base64 编码 — 选择文件后立即转换
3. 数据 URL 生成 — 自动添加正确的 MIME 类型前缀
4. 解码支持 — 粘贴 Base64 以下载原始文件
5. 复制到剪贴板 — 一键复制原始 Base64 和完整数据 URL
6. 文件大小比较 — 显示原始大小与编码后大小

用于在单页 HTML 导出中嵌入图像、准备用于 JSON API 上传的文件、生成 CSS 数据 URL，以及调试网络请求中的 Base64 编码内容。