Base64 文件编码
文件本质是二进制数据。Base64 把二进制编码成文本，让文件可以安全地放进 JSON、HTML、CSS 和 API 请求里。
上传文件，查看编码详情
拖拽任意文件，或点击选择
仅读取元数据，不上传文件
什么是 Base64 文件编码？
计算机里所有文件——图片、PDF、音频、字体——本质上都是一串字节（0–255 的整数序列）。这些字节里很多值对应控制字符，在 HTTP、SMTP、JSON 等文本协议中传输时会被截断或损坏。
Base64 解决了这个问题：它把任意二进制数据转换成 64 个安全的可打印 ASCII 字符（A–Z、a–z、0–9、+、/），让文件内容可以安全地嵌入任何文本格式中。
代价是体积增大约 33%——这是把 3 字节编码为 4 字符不可避免的开销。
文件如何变成 Base64 字符串
读取文件字节
文件在磁盘或内存中是一串字节（0–255 的整数序列）。PNG 文件以 89 50 4E 47 开头，PDF 以 25 50 44 46 开头，每种格式都有自己的二进制结构。
89 50 4E 47 0D 0A 1A 0A … (PNG magic bytes)每次取 3 个字节
Base64 算法每次处理 3 个字节（24 bit）。如果最后一组不足 3 字节，用 0 补齐到 24 bit。
字节: 0x4D 0x61 0x6E → 二进制: 01001101 01100001 01101110拆成 4 组 6 bit
24 bit 均分为 4 组，每组 6 bit。6 bit 的值范围是 0–63，恰好对应 Base64 字母表的 64 个字符。
010011 | 010110 | 000101 | 101110 → 19, 22, 5, 46查表输出字符
用每组的 0–63 值查 Base64 字母表（A=0, B=1 … Z=25, a=26 … z=51, 0=52 … 9=61, +=62, /=63），得到 4 个 ASCII 字符。
19→T, 22→W, 5→F, 46→u → "TWFu"补齐 padding
如果输入字节数不是 3 的倍数，最后一组用 = 填充：余 1 字节补 ==，余 2 字节补 =。这确保输出长度始终是 4 的倍数。
"M" (1字节) → "TQ=="，"Ma" (2字节) → "TWE="拼接 Data URI 前缀
完整的 Base64 文件通常包裹在 Data URI 里，加上 MIME Type 前缀，告诉浏览器或接收方这是什么类型的文件。
data:image/png;base64,[Base64字符串]常见文件类型的 Base64 起始特征
每种文件格式都有固定的"magic bytes"文件头，编码后的 Base64 前几个字符是固定的——可以用来快速识别文件类型：
| 文件类型 | Base64 开头 | Data URI 前缀 | 说明 |
|---|---|---|---|
| PNG 图片 | iVBORw0KGgo… | data:image/png;base64, | PNG 头 89504E47 的 Base64 |
| JPEG 图片 | /9j/4AAQSkZJ… | data:image/jpeg;base64, | JPEG 头 FFD8FF 的 Base64 |
| PDF 文档 | JVBERi0x… | data:application/pdf;base64, | %PDF- 的 Base64 编码 |
| SVG 图形 | PHN2ZyB4bWxu… | data:image/svg+xml;base64, | <svg xmlns= 的 Base64 |
| WOFF2 字体 | d09GMgAB… | data:font/woff2;base64, | WOFF2 文件头的 Base64 |
| ZIP 压缩包 | UEsDBAA… | data:application/zip;base64, | PK 头（ZIP magic）的 Base64 |
Base64 编码后文件变多大
Base64 字符数 = ⌈原始字节数 / 3⌉ × 4
| 原始大小 | Base64 大小 | 增幅 | 典型场景 |
|---|---|---|---|
| 1 KB | ≈ 1.37 KB | +37% | 小图标，可接受 |
| 5 KB | ≈ 6.7 KB | +34% | CSS 背景图，临界值 |
| 50 KB | ≈ 67 KB | +34% | HTML 体积明显增大 |
| 500 KB | ≈ 667 KB | +33% | API 传输开始有压力 |
| 5 MB | ≈ 6.7 MB | +33% | 浏览器处理会明显卡顿 |
| 50 MB | ≈ 67 MB | +33% | 不推荐，改用对象存储 |
实际增幅在 33%–37% 之间，小文件增幅略高（padding 比例更大）。
什么时候用，什么时候不用
适合用 Base64 编码文件
- 小图片内嵌到 HTML / CSS（< 5 KB）
- HTML 邮件嵌入图片（邮件客户端不支持外链）
- CSS @font-face 内联小字体
- JSON API 传小文件附件（< 1 MB）
- 单文件 HTML 需要自包含所有资源
- favicon 直接写在 <link> 标签
不适合用 Base64 编码文件
- 大文件（> 10 KB）— 体积膨胀 + 浏览器卡顿
- 需要被浏览器独立缓存的资源
- 多页面共用的图片（每次都内联，无法利用缓存）
- 用户上传文件到服务器（用 multipart/form-data）
- 需要流式传输的场景
- 视频 / 音频文件（体积巨大）
相关工具
常见问题
为什么文件可以转成 Base64？
所有文件本质上都是字节序列。Base64 把每 3 个字节转换为 4 个 ASCII 字符，这个过程是通用的，对 PNG、PDF、字体等任何文件格式都适用，无需了解文件内部结构。
任何文件都可以 Base64 编码吗？
可以。Base64 把文件当成纯二进制数据处理，不关心内容是什么。图片、PDF、压缩包、可执行文件——都可以。MIME Type 是附加在 Data URI 前缀里的元数据，告诉接收方如何解读这段数据。
Base64 编码会损坏文件内容吗？
不会。Base64 编码是可逆的——解码后完全恢复原始字节，没有数据损失，也不是压缩（不会改变内容）。只是表示形式变了：从二进制变成了 ASCII 文本。
浏览器怎么知道 Data URI 是什么类型的文件？
Data URI 的 MIME Type 告诉浏览器文件类型，例如 data:image/png;base64,... 浏览器知道这是 PNG 图片，data:application/pdf;base64,... 是 PDF。选择正确的 MIME Type 是 Data URI 能被正常渲染的关键。
为什么大文件不适合 Base64？
三个原因：① 体积增大 33%，传输更慢；② 浏览器端 Base64 编码在主线程同步运行，大文件会卡死 UI；③ 内存峰值是原文件 2.3 倍（ArrayBuffer + 字符串同时存在）。大文件应使用 multipart/form-data 上传或对象存储直传。
Node.js 中怎么把文件编码为 Base64？
const b64 = fs.readFileSync("file.png").toString("base64")，或 const b64 = Buffer.from(fileBuffer).toString("base64")。解码用 Buffer.from(b64, "base64")。Node.js 的 Buffer 类直接处理原始字节，不需要像浏览器端那样绕过 btoa() 的 Latin-1 限制。