文件转 Base64 实用指南: 把任意文件编码成纯文本

把一个文件变成一长串字母数字, 这件事乍看没什么用, 真正写代码的人却离不开它。图标想内联进 CSS、二进制想塞进一段 JSON、邮件想带个小附件, 背后用的都是同一招: 把文件编码成 Base64 文本。本文讲清楚它是什么、能干什么、代价在哪, 以及为什么不该把它用在大文件上。

Base64 到底做了什么

任何文件本质上都是一串字节, 取值范围 0 到 255。问题在于很多传输通道只认得纯文本, 一旦遇到不可见字节、换行符或特殊控制字符就会出错。Base64 的思路是把每 3 个字节(24 位)重新切成 4 组、每组 6 位, 再用一张 64 个字符的表(大小写字母、数字、加号和斜杠)映射出来。这样输出永远落在安全的可打印字符里, 任何能传文本的地方都能传它。

关键认知: 任意文件都能转 Base64。不只是图片, PDF、字体、压缩包、Excel、二进制可执行文件都可以。编码不关心内容是什么, 它只看字节, 所以这是一种通用的文本封装手段, 不是某种图片专属格式。

体积会增大约 33%

这是必须先记住的代价。Base64 用 4 个字符表示原本 3 个字节, 也就是 4/3, 编码后的体积比原文件大约多三分之一。一个 9 KB 的图标编码后接近 12 KB, 再加上 data URI 的前缀和可能的换行, 还会再多一点。

所以经验法则很简单: 小素材和测试用例可以放心转, 大文件不要。把一张几百 KB 的图片做成 data URI 内联进 CSS, 不仅文件膨胀, 还会拖慢首屏解析, 得不偿失。我自己的习惯是 10 KB 以内的小图标、SVG 才考虑内联, 再大就老老实实走正常的静态资源加载。

它能用在哪些地方

内联资源 / data URI: 给 Base64 加上 data:image/png;base64, 这样的前缀, 就成了一个可以直接写进 <img src>、CSS background 或 HTML 的内联资源, 省掉一次额外的网络请求。
JSON 里传二进制: JSON 只能装文本, 想在一个请求体里带上一张缩略图或一段证书, 编码成 Base64 字符串塞进字段是最常见的做法。
邮件附件: MIME 协议规定附件用 Base64 编码后嵌进邮件正文, 你平时收到的每个附件在传输时都是一大段 Base64。
自包含的示例和 fixture: 写 bug report 或单元测试时, 把一个小样本文件编码进代码里, 别人不用额外下载文件就能复现。

一个真实的小例子

拿一个最短的纯文本文件举例。内容只有 Toolora 这 7 个字符, 编码后是:

VG9vbG9yYQ==

末尾两个等号是填充: 7 个字节不是 3 的整数倍, 编码器补齐位数后用 = 占位。如果走 data URL 模式, 输出会变成:

data:text/plain;base64,VG9vbG9yYQ==

把这一行粘进浏览器地址栏, 就能直接看到 Toolora 这几个字。换成一张 1×1 的透明 PNG, 原理完全一样, 只是字符串更长、MIME 前缀变成 image/png 而已。

全程在本地, 文件不上传

这是我特别看重的一点。很多在线转换站会把文件先传到服务器再返回结果, 对图标无所谓, 对一份内部配置或带密钥的文件就是风险。Toolora 的文件转 Base64 在浏览器里直接读取你选中的文件并生成文本, 全程不发往任何服务器。要提醒的是, 编码不等于加密: 输出文本里装着完整的文件内容, 任何人解码回去都能拿到原文, 所以它的敏感级别和原文件一模一样, 别因为看起来像乱码就掉以轻心。

如果你不确定一个文件的真实类型, 想确认 data URL 该写哪个 MIME 前缀, 可以先用文件 MIME 类型检测看一眼再编码。

小结

文件转 Base64 的本质是把任意字节封装成纯文本, 换来的是能在只认文本的通道里自由传输的便利, 代价是体积增大约三分之一。把它用在内联小素材、JSON 传二进制、邮件附件和可复现示例上最划算; 一旦文件变大, 就该回到正常的资源加载方式。记住编码不是加密、记住本地处理才安全, 这两条比记住编码表更重要。

Made by Toolora · Updated 2026-06-13