文件与Base64互转工具(支持data URI)

将图片、PDF等任意文件转换为Base64字符串或data URI,也可以将Base64字符串或data URI还原为文件并下载。所有转换均在浏览器内完成,文件不会上传到服务器。

什么是文件与Base64互转

Base64是一种编码方式,仅用A~Z、a~z、0~9、+、/这64种可打印字符来表示图片、PDF等任意二进制数据。当开发者需要把文件内容嵌入到只能安全处理文本的场景(例如JSON数据、CSS样式表或HTML代码)时,就会先把文件转换为Base64字符串。如果在编码字符串前加上MIME类型信息,形成data:image/png;base64,...的形式,就成为data URI,浏览器可以直接将其解析为图片,无需另外获取文件。

本工具同时支持两个方向:将任意文件转换为Base64字符串或data URI,以及将Base64字符串或data URI还原为原始文件并下载。所有转换均通过浏览器内的JavaScript(FileReader、Blob API)完成,文件内容绝不会发送到外部服务器。无论是想查看源代码中神秘Base64数据的实际内容,还是处理不希望上传的机密文件,都可以放心使用。

文件与Base64互转的使用方法

  1. 选择转换方向 根据需要选择“文件 → Base64”或“Base64 → 文件”模式。
  2. 提供文件或Base64文本 在“文件 → Base64”模式下拖放或选择文件;在“Base64 → 文件”模式下粘贴Base64字符串或data URI。
  3. 等待自动转换完成 选择或粘贴内容后,转换会立即在浏览器内完成。
  4. 确认检测到的MIME类型(Base64 → 文件时) 如果输入的不是完整data URI,会显示MIME类型选择栏,请选择与原文件匹配的类型。
  5. 复制结果或下载文件 复制编码后的字符串,或下载还原出的文件,完成整个流程。

用好本工具的小技巧

  • 在“文件 → Base64”模式下可上传任意类型的文件(图片、PDF、音频等),并可分别复制data URI形式和普通Base64字符串。
  • 在“Base64 → 文件”模式下,粘贴以data:开头的完整data URI会自动识别MIME类型;如果只是普通的Base64字符串,请手动选择MIME类型。
  • 所有转换处理都在浏览器内的JavaScript中完成,上传的文件或Base64字符串绝不会被发送到服务器,即使是机密文件也可放心使用。
  • 如果想在CSS或HTML中嵌入小图标,可以直接将data URI形式的输出粘贴到background-image: url(...)或<img>标签的src中。
  • 由于Base64编码会使文件体积增大约33%,转换数十MB以上的大文件时浏览器可能会出现卡顿。

常见使用场景

在CSS中直接嵌入小图标

将图标转换为data URI,直接填入background-image属性,避免为小型资源额外发起HTTP请求。

在JSON格式的API请求中传输文件

将图片或附件编码为Base64字符串,作为普通字符串值放入JSON请求或响应正文中传输。

查看源代码中出现的Base64数据内容

将HTML或CSS源码中出现的陌生Base64字符串粘贴进来还原为文件,直接查看其真实内容。

在HTML邮件中内嵌图片

将徽标等图片进行Base64编码后直接嵌入HTML邮件正文,无需作为单独的附件发送。

术语表

Base64
仅用A~Z、a~z、0~9、+、/这64种可打印ASCII字符表示二进制数据的编码方式。它不是加密,只是让任意字节能以文本形式安全传输的转换手段。
data URI
将文件经Base64编码后的内容直接嵌入URL中的一种格式。由于同时携带MIME类型信息,可以直接作为图片来源或CSS背景使用。
MIME类型
用于描述文件格式的标识符,以“大类/子类”形式表示,例如image/png或application/pdf。浏览器据此判断如何处理该文件。
编码
将数据从一种表示形式转换为另一种表示形式的过程。Base64编码具体来说是把二进制数据转换为可打印的文本字符串。
客户端处理
完全在用户浏览器内处理数据,而不发送到服务器的方式。本工具的所有转换都在客户端完成,文件不会离开您的设备。
数据体积增加
Base64编码导致数据体积比原文件增大约33%的现象。这是将8位二进制数据重新打包为6位字符所带来的、无法避免的特性。

常见问题

Base64是一种将二进制数据(图片、音频、可执行文件等任意格式的数据)仅用A~Z、a~z、0~9、+、/这64种可打印ASCII字符表示的编码方式。它不是加密,只是一种让数据能以安全的文本形式传输的转换方式。

data URI是将文件内容以Base64编码的字符串形式直接嵌入URL中的一种格式,例如data:image/png;base64,iVBOR...。由于其中包含MIME类型信息,可以直接填入<img>标签的src属性或CSS的background-image中显示图片。

不会。本工具的转换处理(使用FileReader和Blob进行编码解码)完全在您浏览器内的JavaScript中完成,文件内容或Base64字符串绝不会被发送到服务器。

可以。如果粘贴的内容不是以data:开头的完整data URI格式,会显示MIME类型选择栏,请手动选择原始文件格式(图片、PDF、文本等)后再下载。

Base64会将8位为单位的二进制数据重新编码为6位为单位的字符,因此编码后的数据量约为原来的4/3倍,即增大约33%。这是Base64编码机制本身无法避免的特性。
工具君

闲话 ― 为什么Base64会让文件体积增大33%

Base64编码诞生的背景,是电子邮件、JSON、URL等许多传输通道“只能安全处理可打印的ASCII字符”这一限制。如果将图片、可执行文件等任意二进制数据原样发送,可能会因混入控制字符而损坏,于是人们设计出仅用A~Z、a~z、0~9、+、/这64种可打印字符来表示二进制数据的Base64方式。

Base64会将3字节(24位)的二进制数据按每6位切分为4份,分别映射为4个Base64字符。由于要把以8位为单位的二进制数据重新塞进以6位为单位的字符中,编码后的数据量约为原来的4/3倍,也就是增大约33%。这是以文本形式安全传输所必须付出的代价。

这一特性的巧妙应用之一,就是在HTML、CSS中以data:image/png;base64,...的形式直接嵌入小图片的data URI。这样做可以避免为图标等小型资源额外发起HTTP请求,是加快页面加载速度的常用手段。不过由于体积增加约33%且无法利用浏览器缓存,并不适合用于嵌入较大的图片文件。