DevToolBox免费
博客广告合作

Base64 编解码在线指南:JavaScript、Python、命令行及更多

15 分钟阅读作者 DevToolBox
摘要

Base64 是一种二进制转文本的编码方案,使用 64 个 ASCII 字符表示二进制数据。常用于 Data URI、JWT 令牌、邮件附件(MIME)、API 认证和 Kubernetes Secrets。Base64 会增大数据约 33%,并且不是加密。使用我们的免费在线工具即时编解码 Base64。

核心要点
  • Base64 将 3 字节二进制数据转换为 4 个 ASCII 字符,导致约 33% 的大小增加。
  • 在 JavaScript 中,浏览器使用 btoa()/atob(),Node.js 使用 Buffer。Unicode 需先编码为 UTF-8。
  • Base64URL 用 - 替换 +,用 _ 替换 /,适用于 URL、文件名和 JWT 令牌。
  • Base64 是编码,不是加密。任何人都可以无密钥解码。切勿用于安全保护。
  • 对于超过 5-10KB 的文件,优先使用二进制传输方式(multipart/form-data)。
  • 常见用途:Data URI、JWT 令牌、HTTP Basic Auth、MIME 邮件、Kubernetes Secrets、CSS 嵌入。

试试我们的免费 Base64 编解码工具 →

什么是 Base64 编码?为什么需要它?

Base64 是一种在 RFC 4648 中定义的二进制转文本编码方案。它使用 64 个字符的字母表将任意二进制数据转换为可打印的 ASCII 字符串:A-Z(26)、a-z(26)、0-9(10)、+(1)和 /(1),加上 = 用于填充。

Base64 的诞生是为了解决一个基本问题:许多系统和协议(SMTP 邮件、HTML、JSON、HTTP 头)仅支持文本数据。当需要通过这些纯文本通道传输二进制数据时,需要将二进制表示为文本。

编码过程将每 3 字节(24 位)分为四个 6 位组。每个 6 位值(0-63)映射到 Base64 字母表中的一个字符。输入长度不是 3 的倍数时用 = 填充。

Base64 Alphabet (RFC 4648):
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z   (0-25)
a b c d e f g h i j k l m n o p q r s t u v w x y z   (26-51)
0 1 2 3 4 5 6 7 8 9                                     (52-61)
+ /                                                       (62-63)
= (padding)

Encoding example: "Hi" (2 bytes, needs padding)
H = 0x48 = 01001000
i = 0x69 = 01101001

Binary:  010010 000110 100100 (pad)
Index:   18     6      36     =
Char:    S      G      k      =
Result:  "SGk="

JavaScript 中的 Base64 编解码

JavaScript 在浏览器和 Node.js 环境中都提供了内置的 Base64 函数:

浏览器:btoa() 和 atob()

btoa() 将字符串编码为 Base64,atob() 将 Base64 解码。这两个函数仅处理 ASCII 字符。

// Encode to Base64
const encoded = btoa("Hello, World!");
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

// Decode from Base64
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");
console.log(decoded); // "Hello, World!"

// Check if a string is valid Base64
function isBase64(str) {
  try {
    return btoa(atob(str)) === str;
  } catch (e) {
    return false;
  }
}

浏览器中处理 Unicode

由于 btoa() 对非 ASCII 字符会报错,需要先将 Unicode 文本编码为 UTF-8:

// Method 1: TextEncoder (modern browsers)
function toBase64Unicode(str) {
  const bytes = new TextEncoder().encode(str);
  const binStr = Array.from(bytes, b => String.fromCodePoint(b)).join("");
  return btoa(binStr);
}

function fromBase64Unicode(b64) {
  const binStr = atob(b64);
  const bytes = Uint8Array.from(binStr, c => c.codePointAt(0));
  return new TextDecoder().decode(bytes);
}

// Method 2: encodeURIComponent (legacy support)
const encoded = btoa(unescape(encodeURIComponent("你好世界")));
const decoded = decodeURIComponent(escape(atob(encoded)));

Node.js:Buffer

Node.js 的 Buffer 类原生支持 Base64 编码,包括 UTF-8:

// Node.js: Encode
const encoded = Buffer.from("Hello, World!").toString("base64");
// "SGVsbG8sIFdvcmxkIQ=="

// Node.js: Decode
const decoded = Buffer.from("SGVsbG8sIFdvcmxkIQ==", "base64").toString();
// "Hello, World!"

// Node.js: Unicode works natively
const unicodeB64 = Buffer.from("你好世界").toString("base64");
const unicodeStr = Buffer.from(unicodeB64, "base64").toString("utf-8");

// Node.js: Base64URL encoding
const urlSafe = Buffer.from("data").toString("base64url");
// No + / or = characters

浏览器中文件转 Base64(FileReader)

使用 FileReader API 将文件转换为 Base64:

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file); // Returns "data:mime/type;base64,..."
  });
}

// Usage with an input element
const input = document.querySelector("input[type=file]");
input.addEventListener("change", async (e) => {
  const file = e.target.files[0];
  const dataUrl = await fileToBase64(file);
  console.log(dataUrl);
  // "data:image/png;base64,iVBORw0KGgo..."
});

试试我们的免费 Base64 编解码工具 →

Python 中的 Base64 编解码

Python 标准库包含 base64 模块,支持标准 Base64 和 URL 安全 Base64:

基本编解码

import base64

# Encode a string (must be bytes)
encoded = base64.b64encode(b"Hello, World!")
print(encoded)  # b'SGVsbG8sIFdvcmxkIQ=='

# Decode back to bytes
decoded = base64.b64decode(encoded)
print(decoded)  # b'Hello, World!'

# String to Base64 string (common pattern)
text = "Hello, World!"
b64_str = base64.b64encode(text.encode("utf-8")).decode("ascii")
print(b64_str)  # "SGVsbG8sIFdvcmxkIQ=="

# Unicode works via UTF-8
unicode_b64 = base64.b64encode("你好世界".encode("utf-8"))
print(unicode_b64)  # b'5L2g5aW95LiW55WM'

URL 安全 Base64

import base64

# URL-safe Base64 (replaces + with - and / with _)
data = b"subjects?abcd"
standard = base64.b64encode(data)
urlsafe  = base64.urlsafe_b64encode(data)

print(standard)  # b'c3ViamVjdHM/YWJjZA=='
print(urlsafe)   # b'c3ViamVjdHM_YWJjZA=='
#                          Note: / became _

# Decode URL-safe Base64
original = base64.urlsafe_b64decode(urlsafe)
print(original)  # b'subjects?abcd'

编码文件

import base64

# Encode a file to Base64
with open("image.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode("ascii")
print(f"data:image/png;base64,{encoded[:50]}...")

# Decode Base64 back to a file
with open("output.png", "wb") as f:
    f.write(base64.b64decode(encoded))

# One-liner for reading + encoding
b64 = base64.b64encode(open("doc.pdf", "rb").read()).decode()

命令行 Base64

所有主流操作系统都提供了内置的 Base64 编解码工具:

Linux(GNU coreutils)

大多数 Linux 发行版都包含 base64 命令。使用 -w 0 禁用换行:

# Encode a string (use -n to avoid trailing newline!)
echo -n "Hello, World!" | base64
# SGVsbG8sIFdvcmxkIQ==

# Decode a string
echo "SGVsbG8sIFdvcmxkIQ==" | base64 -d
# Hello, World!

# Encode a file (no line wrapping)
base64 -w 0 image.png > image.b64

# Decode a file
base64 -d image.b64 > image_restored.png

# Pipe from curl
curl -s https://example.com/api | base64 -w 0

macOS(BSD base64)

macOS 使用 BSD 版本,解码标志是 -D(大写):

# Encode a string
echo -n "Hello, World!" | base64
# SGVsbG8sIFdvcmxkIQ==

# Decode (note: uppercase -D on macOS)
echo "SGVsbG8sIFdvcmxkIQ==" | base64 -D
# Hello, World!

# Encode a file
base64 -i image.png -o image.b64

# Decode a file
base64 -D -i image.b64 -o image_restored.png

OpenSSL(跨平台)

OpenSSL 在 Linux、macOS 和 Windows 上提供一致的 Base64 接口:

# Encode with OpenSSL
echo -n "Hello, World!" | openssl base64
# SGVsbG8sIFdvcmxkIQ==

# Decode with OpenSSL
echo "SGVsbG8sIFdvcmxkIQ==" | openssl base64 -d
# Hello, World!

# Encode a file
openssl base64 -in image.png -out image.b64

# Decode a file
openssl base64 -d -in image.b64 -out image_restored.png

# One line (no wrapping) - pipe through tr
echo -n "Hello" | openssl base64 | tr -d "\n"

Windows PowerShell

PowerShell 使用 .NET 方法进行 Base64 操作:

# PowerShell: Encode
$bytes = [System.Text.Encoding]::UTF8.GetBytes("Hello, World!")
[Convert]::ToBase64String($bytes)
# SGVsbG8sIFdvcmxkIQ==

# PowerShell: Decode
$decoded = [Convert]::FromBase64String("SGVsbG8sIFdvcmxkIQ==")
[System.Text.Encoding]::UTF8.GetString($decoded)
# Hello, World!

# PowerShell: Encode a file
$fileBytes = [IO.File]::ReadAllBytes("C:\path\to\image.png")
[Convert]::ToBase64String($fileBytes) | Out-File image.b64

Data URI:将图片嵌入为 Base64

Data URI 允许将文件数据直接嵌入 HTML 或 CSS,无需额外的 HTTP 请求。格式为:

data:[<mediatype>][;base64],<data>

Examples:
data:text/plain;base64,SGVsbG8=
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
data:application/pdf;base64,JVBERi0xLjQK...

此技术适用于 5KB 以下的小资源。更大的文件应使用普通文件 URL。

HTML 内联图片

<!-- Inline a small PNG icon -->
<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB
       CAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="
  alt="1x1 pixel"
  width="16"
  height="16"
/>

<!-- Inline a small GIF -->
<img
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  alt="transparent pixel"
/>

CSS 背景图片

.icon-check {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxu...);
  background-size: contain;
  width: 24px;
  height: 24px;
}

@font-face {
  font-family: "CustomIcon";
  src: url(data:font/woff2;base64,d09GMgABAAAAA...) format("woff2");
}

SVG Data URI(无需 Base64)

SVG 已经是文本格式,可以使用 URL 编码的 Data URI,比 Base64 更小:

/* SVG as URL-encoded data URI (smaller than Base64) */
.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
}

试试我们的免费 Base64 编解码工具 →

Base64 在 API 和认证中的使用

Base64 在多种 API 模式中发挥关键作用:

HTTP Basic 认证

HTTP Basic Auth 将 username:password 编码为 Base64 字符串。这本身不安全,必须使用 HTTPS:

// HTTP Basic Authentication
const username = "admin";
const password = "secret123";
const credentials = btoa(username + ":" + password);

fetch("https://api.example.com/data", {
  headers: {
    "Authorization": "Basic " + credentials
    // Authorization: Basic YWRtaW46c2VjcmV0MTIz
  }
});

// curl equivalent
// curl -u admin:secret123 https://api.example.com/data
// curl -H "Authorization: Basic YWRtaW46c2VjcmV0MTIz" https://api.example.com/data

通过 JSON 上传文件

当 API 要求通过 JSON 上传文件时,文件通常被 Base64 编码:

// File upload via JSON API
const fileInput = document.querySelector("input[type=file]");
const file = fileInput.files[0];
const reader = new FileReader();

reader.onload = () => {
  const base64Data = reader.result.split(",")[1]; // Remove data URI prefix

  fetch("https://api.example.com/upload", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      filename: file.name,
      contentType: file.type,
      data: base64Data  // Base64-encoded file contents
    })
  });
};

reader.readAsDataURL(file);

JWT(JSON Web Tokens)

JWT 由三个 Base64URL 编码的段组成:header.payload.signature。

// JWT structure: header.payload.signature
// Each part is Base64URL-encoded

// Decode a JWT payload (without verification)
function decodeJwtPayload(token) {
  const payload = token.split(".")[1];
  // Base64URL to standard Base64
  const base64 = payload.replace(/-/g, "+").replace(/_/g, "/");
  const padded = base64 + "=".repeat((4 - base64.length % 4) % 4);
  return JSON.parse(atob(padded));
}

const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U";
console.log(decodeJwtPayload(token));
// { sub: "1234567890" }

Base64URL 安全编码 vs 标准 Base64

标准 Base64 使用在 URL 中有特殊含义的 + 和 /。Base64URL 替换了这些字符:

CharacterStandard Base64Base64URL
62nd character+- (hyphen)
63rd character/_ (underscore)
Padding=Usually omitted

Base64URL 用于 JWT 令牌、URL 参数、文件名等场景。

// JavaScript: Convert standard Base64 to Base64URL
function toBase64Url(base64) {
  return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}

function fromBase64Url(base64url) {
  let base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
  const pad = base64.length % 4;
  if (pad) base64 += "=".repeat(4 - pad);
  return base64;
}

// Node.js: Built-in Base64URL support
Buffer.from("data").toString("base64url"); // No + / or = chars

// Python
import base64
base64.urlsafe_b64encode(b"data")  # b'ZGF0YQ=='

// Command line: Convert with tr
echo -n "data" | base64 | tr '+/' '-_' | tr -d '='

性能考量:33% 大小增加

Base64 编码会将数据大小增加约 33%,因为每 3 字节表示为 4 个字符:

  • 网络带宽:1MB 图片编码后约 1.37MB。
  • 页面大小:嵌入的 Base64 图片无法单独缓存。
  • 内存使用:编码字符串和解码二进制同时存在于内存中。
  • 压缩惩罚:Base64 数据压缩效果差。应先压缩再编码。
  • CPU 开销:大规模处理 Base64 字符串会增加延迟。
Original SizeBase64 SizeOverheadRecommendation
1 KB1.37 KB+370 bytesOK for data URIs
10 KB13.7 KB+3.7 KBConsider file URL instead
100 KB137 KB+37 KBUse binary transfer
1 MB1.37 MB+370 KBAlways use binary transfer

经验法则:仅对 5KB 以下的图片使用 Base64 Data URI。更大的文件应单独提供并利用缓存。

安全警告:Base64 不是加密

另请参阅:URL encoding guide

这是软件开发中最常见的误解之一:Base64 编码不提供任何安全性。它是可逆的编码,不是加密。

切勿使用 Base64 “保护”密码、API 密钥或个人信息。

实际安全应使用:

  • 加密:AES-256-GCM、ChaCha20-Poly1305 或 RSA
  • 哈希:bcrypt、Argon2 或 scrypt(加盐)
  • HTTPS/TLS:用于传输中的数据
  • 签名令牌:HMAC-SHA256 用于数据完整性验证
// WRONG: Base64 is NOT security
const encoded = btoa("my-secret-password");
// Anyone can do: atob("bXktc2VjcmV0LXBhc3N3b3Jk") => "my-secret-password"

// RIGHT: Use proper encryption
// Node.js example with AES-256-GCM
const crypto = require("crypto");
const key = crypto.randomBytes(32);
const iv = crypto.randomBytes(12);
const cipher = crypto.createCipheriv("aes-256-gcm", key, iv);
let encrypted = cipher.update("my-secret-password", "utf8", "base64");
encrypted += cipher.final("base64");
// Now Base64 is used to ENCODE the encrypted output, not to protect it

Base64 的常见用途

1. 邮件附件(MIME)

SMTP 协议为 7 位 ASCII 设计。二进制文件在发送前必须 Base64 编码。

MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="boundary123"

--boundary123
Content-Type: text/plain

Hello, please find the attachment.

--boundary123
Content-Type: image/png
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="logo.png"

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAA
DUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

--boundary123--

2. JWT 令牌

JWT 使用 Base64URL 编码头部和载荷段。

3. CSS Data URI

小图片和图标可直接嵌入 CSS 文件中:

/* Critical CSS: embed small icons to avoid render-blocking requests */
.loading-spinner {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i...);
  animation: spin 1s linear infinite;
}

/* Favicon as data URI in HTML */
<link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..." />

4. Kubernetes Secrets

Kubernetes 将秘密值存储为 Base64 编码字符串。这不是为了安全,而是为了 YAML 序列化:

# Kubernetes Secret manifest
apiVersion: v1
kind: Secret
metadata:
  name: db-credentials
type: Opaque
data:
  username: YWRtaW4=         # echo -n "admin" | base64
  password: cGFzc3dvcmQxMjM= # echo -n "password123" | base64

# Create from command line
kubectl create secret generic db-credentials \
  --from-literal=username=admin \
  --from-literal=password=password123

# Decode a secret
kubectl get secret db-credentials -o jsonpath="{.data.password}" | base64 -d

5. API 文件上传

REST API 通过 JSON 接受文件上传时使用 Base64 编码。

6. WebSocket 二进制数据

通过 WebSocket 文本帧传输二进制数据时,Base64 编码确保数据不会损坏。

试试我们的免费 Base64 编解码工具 →

常见问题

Base64 编码用于什么?

Base64 将二进制数据转换为文本以便安全传输。常见用途包括 Data URI、JWT 令牌、HTTP Basic 认证、邮件附件和 Kubernetes Secrets。

如何在 JavaScript 中将字符串编码为 Base64?

浏览器中使用 btoa() 编码,atob() 解码。Unicode 需先编码为 UTF-8。Node.js 使用 Buffer.from(str).toString("base64")。

Base64 编码安全吗?可以用它保护数据吗?

不安全。Base64 是编码,不是加密。任何人都可以无密钥解码。请使用 AES-256 或 RSA 进行加密。

为什么 Base64 会增大数据 33%?

Base64 用 4 个字符表示 3 个字节。4/3 = 1.333,即增大 33%。

Base64 和 Base64URL 有什么区别?

标准 Base64 用 + 和 /,在 URL 中有特殊含义。Base64URL 用 - 替换 +,用 _ 替换 /,通常省略填充。用于 JWT 和 URL 参数。

如何将图片转换为 Base64 用于 HTML 或 CSS?

命令行:base64 -w 0 image.png(Linux)或 base64 image.png(macOS)。JavaScript 使用 FileReader.readAsDataURL()。仅对 5KB 以下的图片使用。

可以在命令行中使用 Base64 编码吗?

可以。Linux:echo -n "text" | base64。macOS 解码用 -D。OpenSSL 跨平台:echo -n "text" | openssl base64。PowerShell 用 [Convert]::ToBase64String()。

总结

Base64 编码是每个开发者工具箱中的基础工具。记住关键规则:它增加约 33% 的大小,不是加密,超过 5KB 的文件应优先使用二进制传输。

在线编解码 Base64 →

这篇文章有帮助吗?

保持更新

获取每周开发技巧和新工具通知。

无垃圾邮件,随时退订。

合作推荐

赞助这篇文章

把你的产品放到这个开发者主题旁边,并追踪点击效果。

咨询文章赞助

相关文章

Base64 编码实战:每个开发者都应该知道的 7 个真实用途

发现 Base64 编码的 7 个实际应用:HTML 嵌入图片、Kubernetes Secrets、JWT Token、Data URI 等。

命令行 Base64 编解码(Linux、Mac、Windows)

学习如何在任何操作系统的终端中编码和解码 Base64 字符串。涵盖 Linux base64 命令、macOS openssl 和 Windows PowerShell 示例。

在 HTML、CSS 和邮件中嵌入 Base64 图片:完整指南与示例

学习如何在 HTML、CSS 和电子邮件模板中将图片嵌入为 Base64 data URI。优缺点、大小限制、性能影响以及何时使用内联图片。

Base64 编码和解码:开发者完整指南

从位级别理解 Base64 编码工作原理。涵盖 Data URI、JWT 令牌、API 认证、Kubernetes Secrets、JavaScript/Python/命令行示例、URL 安全 Base64 和性能技巧。

JWT 工作原理:JSON Web Token 完全指南

了解 JWT 认证的工作原理,理解 header、payload 和 signature 的结构,安全地在应用中实现 JWT。

ASCII vs Unicode vs UTF-8 编码详解

理解 ASCII、Unicode 和 UTF-8 的区别。了解字符编码原理、为什么 UTF-8 主导了互联网,以及如何处理编码问题。

本站使用 Cookie 进行流量分析与广告展示。继续浏览即视为同意。 隐私政策