免费Base64文件编码器
将任意文件转换为Base64数据URL · 所有操作均在浏览器中完成。
将文件拖放到此处
或
请选择或拖放文件进行编码。
使用方法
- 上传文件：将任意文件（图像、PDF、字体、音频或二进制文件）拖放到拖放区域或点击浏览。
- 获取Base64字符串： 文件在浏览器中即时读取并编码为Base64。
- 复制并使用： 复制Base64字符串以嵌入HTML、CSS、JSON负载、数据URI或其他文本格式。
为什么使用Base64文件编码器？
二进制文件无法直接嵌入HTML、CSS、JSON、XML等文本格式。Base64编码将任意二进制文件转换为安全的ASCII字符串，可嵌入到允许文本的任何位置。这对于在HTML中直接嵌入图像（数据URI）、在CSS中包含字体、无需文件上传端点即可通过邮件或JSON API发送文件、以及创建自包含HTML文档至关重要。
功能特点
- 任意文件类型： 编码图像、PDF、字体、音频、视频及所有二进制文件。
- 数据URI输出： 切换以获取可直接使用的数据URI（data:mime/type;base64,...），用于直接嵌入。
- 文件大小显示： 显示原始大小和编码后大小，便于了解开销。
- 本地处理：文件完全在浏览器中读取和编码，不会上传。
常见问题
Base64比原始文件大多少？
Base64编码会将文件大小增加约33%。100 KB的图像经过Base64编码后约为133 KB。这是将二进制内容嵌入文本的代价。
可以在HTML中使用Base64图像吗？
可以。使用数据URI，如 <img src="data:image/png;base64,[您的Base64]"> 。这样可以无需外部HTTP请求将图像直接嵌入HTML，但会增加页面大小。
有文件大小限制吗？
本工具没有强制限制，但非常大的文件（10 MB以上）可能编码较慢，结果字符串会非常长。对于大文件，建议考虑服务器端解决方案。
Base64 的来历,以及为什么我们仍在使用它
Base64 旨在通过 7 位 ASCII 管道传输 8 位二进制数据。第一个正式规范是用于隐私增强邮件的 RFC 989(1987 年 2 月)。RFC 1341(1992 年 6 月),特别是 RFC 2045「MIME 第一部分」(1996 年 11 月),使其成为将二进制文件附加到电子邮件的标准方式。当前的权威文档是 RFC 4648(2006 年 10 月),它还定义了 URL-safe 变体。机制很简单:取 3 个字节的输入(24 位),分成四个 6 位组,在 64 字符字母表 A-Z a-z 0-9 + / 中查找每一个,附加 = 填充以使输出长度为 4 的倍数。输出大小恰好是输入的 4 ÷ 3 ≈ 133 %。对于嵌入到 URL 中(JWT、OAuth、S3 预签名 URL),RFC 4648 §5 的 URL-safe 变体用 - 替换 +,用 _ 替换 /;通常省略填充。
data: URL:HTML 和 CSS 中的 Base64
data: URL 方案在 RFC 2397(1998 年 8 月)中指定。格式:data:[<mediatype>][;base64],<data>。示例:<img src="data:image/png;base64,iVBORw0KGgo..."> 内联嵌入 PNG 而无需额外的 HTTP 请求。WHATWG URL Living Standard 管理现代浏览器如何解释这些 URL,HTML Living Standard 确认它们在允许 URL 的任何地方都有效,包括 <img>、<link>、<iframe> 和 CSS url() 函数。实用指南:对于小于约 4 KB 的资产使用 data URL,节省一次 HTTP 请求胜过 33% 的负载膨胀。超过 10 KB,使用浏览器缓存的常规文件引用几乎总是获胜,特别是在 HTTP/2 多路复用上。
驱动此工具的浏览器 API
此页面使用来自 HTML Living Standard 的 FileReader API(最初是 2009 年 11 月的 W3C File API 首个公开工作草案;在 Chrome 13 / Firefox 3.6 / Safari 6 / Internet Explorer 10 中发布)。FileReader.readAsDataURL(blob) 用一次调用返回完整的 data:<mime>;base64,<...> 字符串。遗留替代方案是 btoa()(以历史 Unix「binary-to-ASCII」命令命名,是 JavaScript DOM Level 0 的遗留物),但它在非 Latin-1 输入上抛出,除非您首先通过 UTF-8 转码。现代替代品是 Uint8Array.prototype.toBase64(),在 TC39 Stage 4 添加到 ECMAScript 2025。它在 Chrome 132(2025 年 1 月)、Firefox 133(2024 年 11 月)和 Safari 18.2(2024 年 12 月)中发布。对任何新代码使用新 API;为与旧浏览器的兼容性保留 btoa。
此工具的输出实际去向
- HTML / CSS 中的内联图标和小图像,用于自包含或离线优先文档。
- JSON 文件上传有效负载,当后端期望 JSON 字段中的 Base64 字符串而不是
multipart/form-data时。 - MIME 电子邮件附件:RFC 2045 要求对任何非 7 位主体使用 Base64(或 quoted-printable),这意味着每个 PDF、图像或文档附件。
- JWT / OAuth 令牌:每个 JWT 是用
.连接的三个 URL-safe Base64 段。 - 提交到 git 的测试夹具,以便测试图像 / 示例文档与测试文件一起传输。
- Web Push 有效负载,当通过 Push API 传递二进制 blob 时。
- 关键路径 Web 字体嵌入到 CSS 中以避免首次绘制的 FOIT(不可见文本闪烁),接受权衡。
常见错误
- 将 Base64 视为加密。Base64 是编码,不是安全。任何拥有该字符串的人都可以在其浏览器中解码它。永远不要使用 Base64「隐藏」凭据、API 密钥或 PII。
- 忘记
data:<mime>;base64,前缀。一个裸 Base64 字符串不是 data URL。<img>需要完整形式data:image/png;base64,<您的-base64>才能渲染。 - 混合 URL-safe 和标准 Base64。JWT 和 S3 预签名 URL 使用 URL-safe(
-和_)。将标准 Base64(+和/)粘贴到这些上下文中会产生无声的解码失败。 - 忘记 CSP
data:指令。Content Security Policy 中带有img-src 'self'的页面将拒绝加载任何data:image/...URL。您必须显式允许img-src 'self' data:(对font-src、media-src等同样如此)。 - 在主线程上同步编码 100 MB 文件。
FileReader.readAsDataURL在 200 MB 文件上阻塞 UI 几秒钟。对于超过约 20 MB 的任何内容,请使用 Web Worker 或流式分块。 - 直接调用
btoa("é")。它抛出InvalidCharacterError,因为btoa期望 Latin-1,而不是 UTF-8。要么使用btoa(unescape(encodeURIComponent(text)))(遗留),要么通过现代toBase64()方法传递Uint8Array。 - 将 500 KB 徽标内联为 data URL。33% 的膨胀加上浏览器缓存的损失意味着每次页面加载下载 665 KB 而不是 500 KB-一次。使用常规资产引用。
更多常见问题
Base64 的确切大小开销是多少?
恰好是输入的 4 ÷ 3 ≈ 1.333 倍,加上 1-2 字节的 = 填充。999 字节的输入变为 1332 个 Base64 字符(没有填充,因为 999 ÷ 3 = 333 正好)。1000 字节的输入变为 1336(一字节填充)。对于 data URL,添加前缀字节(例如 data:image/png;base64, 是 23 个字符)。
如何为 JWT 或 S3 预签名 URL 获取 URL-safe Base64?
从此工具获取标准 Base64 输出并应用两个替换:+ → -,/ → _。JWT 特别去除尾随的 = 填充;S3 保留它。RFC 4648 §5 记录了该变体。
我可以通过 Base64 往返一个文件而不损坏吗?
可以。Base64 是无损编码。编码为 Base64 然后解码回来产生与原始字节完全相同的原件。丢失数据的唯一方法是截断 Base64 字符串(例如限制存储字符)或在解码时混淆标准与 URL-safe 字母表。
此工具可以处理的最大文件大小是多少?
没有硬限制;实际上浏览器内存是上限。编码 100 MB 文件大约需要 100 MB 的输入加 133 MB 的输出,加上结果字符串的 DOM 开销,可能总共 400 MB。在移动设备上,预计 30 MB 以上会失败。编码在主线程上运行,因此 UI 在处理过程中冻结;对于超过 20 MB 的文件,服务器端或 Web Worker 解决方案更舒适。
我的文件会上传到任何地方吗?
不会。文件使用浏览器的 FileReader.readAsDataURL API 读取,完全在您的浏览器中运行。不发出网络请求,不存储您文件的任何副本在任何服务器上。打开 DevTools 中的网络选项卡并放入文件:您将在编码期间看到零个出站请求。