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

Base64 在 Web 开发中无处不在，但大多数教程只解释了它是如何工作的。本文重点介绍您在日常开发工作中实际使用 Base64 编码的 7 个真实场景，并提供可直接复制的代码示例。

试试我们的 Base64 编码/解码工具 →

1. 在 HTML/CSS 中嵌入图片（Data URI）

Data URI 允许您将小图片直接嵌入 HTML 或 CSS 中，从而省去一次 HTTP 请求。这对于图标、徽标和小型 UI 元素特别有用。

<!-- Embed a small icon directly in HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU..." alt="icon" />

/* Embed in CSS */
.icon {
  background-image: url('data:image/svg+xml;base64,PHN2Zy...');
}

何时使用：10KB 以下的图片（图标、小徽标、UI 元素）。

何时不使用：超过 10KB 的图片——33% 的大小增加会抵消节省的 HTTP 请求。

// Node.js: Convert image file to Base64 data URI
const fs = require('fs');
const imageBuffer = fs.readFileSync('icon.png');
const base64 = imageBuffer.toString('base64');
const dataUri = `data:image/png;base64,${base64}`;
console.log(dataUri);

使用我们的编码器将图片转换为 Base64 →

2. JWT 令牌结构

JSON Web Token（JWT）使用 Base64URL 编码（一种 URL 安全的变体）来处理其三个部分：头部、载荷和签名。理解这一点对于调试认证问题至关重要。

// A JWT token:
// eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiam9obiJ9.signature
//  ^^^^^ header ^^^^^   ^^^^^ payload ^^^^^

// Decoding the header (Base64URL → JSON):
atob('eyJhbGciOiJIUzI1NiJ9');
// → '{"alg":"HS256"}'

// Decoding the payload:
atob('eyJ1c2VyIjoiam9obiJ9');
// → '{"user":"john"}'

关键点：JWT 令牌未加密。任何人都可以通过简单的 Base64 解码来读取头部和载荷。签名验证的是完整性，而非保密性。

使用我们的 JWT 解码器解码 JWT 令牌 →

3. Kubernetes Secrets

Kubernetes 在 YAML 清单中以 Base64 编码字符串的形式存储密钥值。这是 DevOps 中最常见的 Base64 使用场景之一。

# Creating a Kubernetes Secret
apiVersion: v1
kind: Secret
metadata:
  name: db-credentials
type: Opaque
data:
  DB_PASSWORD: c3VwZXItc2VjcmV0  # echo -n 'super-secret' | base64
  DB_USER: YWRtaW4=              # echo -n 'admin' | base64

# Encode a value for Kubernetes secrets
echo -n 'my-password' | base64
# → bXktcGFzc3dvcmQ=

# Decode a Kubernetes secret value
echo -n 'bXktcGFzc3dvcmQ=' | base64 --decode
# → my-password

# IMPORTANT: Always use -n with echo to avoid trailing newline!

安全警告：Kubernetes Secrets 中的 Base64 用于编码，而非加密。请使用 Sealed Secrets、External Secrets 或 Vault 等解决方案来实现真正的安全性。

4. API 请求/响应载荷

当 API 需要在 JSON 载荷中传输二进制数据（图片、文件、证书）时，Base64 编码是标准方法，因为 JSON 只支持文本。

// Uploading an image via API
const fileInput = document.getElementById('avatar');
const file = fileInput.files[0];

const reader = new FileReader();
reader.onload = async () => {
  const base64 = reader.result.split(',')[1]; // Remove data URI prefix

  await fetch('/api/upload-avatar', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      filename: file.name,
      data: base64,        // Base64-encoded file content
      contentType: file.type,
    }),
  });
};
reader.readAsDataURL(file);

5. HTTP Basic 认证

HTTP Basic 认证方案以 Base64 编码字符串的形式在 Authorization 头中传输凭据。许多 API 仍在使用它。

// Constructing Basic Auth header
const username = 'admin';
const password = 'secret123';
const credentials = btoa(`${username}:${password}`);
// → "YWRtaW46c2VjcmV0MTIz"

// Using in fetch
fetch('https://api.example.com/data', {
  headers: {
    'Authorization': `Basic ${credentials}`,
  },
});

// curl equivalent
// curl -u admin:secret123 https://api.example.com/data
// (curl Base64-encodes automatically with -u)

务必使用 HTTPS 配合 Basic 认证。在未加密的 HTTP 上，任何拦截流量的人都可以轻易解码 Base64 凭据。

6. 电子邮件附件（MIME）

电子邮件协议（SMTP）最初仅为 ASCII 文本设计。二进制附件——图片、PDF、文档——在通过 MIME 包含在电子邮件中之前会被 Base64 编码。

// Node.js: Sending email with attachment (nodemailer)
const nodemailer = require('nodemailer');
const fs = require('fs');

const pdfBuffer = fs.readFileSync('report.pdf');

await transporter.sendMail({
  from: 'sender@example.com',
  to: 'recipient@example.com',
  subject: 'Monthly Report',
  attachments: [
    {
      filename: 'report.pdf',
      content: pdfBuffer,
      // nodemailer handles Base64 encoding internally
      encoding: 'base64',
    },
  ],
});

在幕后，MIME 消息看起来像这样：

Content-Type: application/pdf
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="report.pdf"

JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMg
MCBSPj4Kc3RyZWFtCkJUCi9GMS...

7. 在纯文本系统中存储二进制数据

某些系统——环境变量、JSON 配置文件、CSV 导出——只支持文本。Base64 让您可以安全地在这些纯文本环境中嵌入二进制数据。

# .env file: Store SSL certificate as Base64
SSL_CERT=LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0t...
SSL_KEY=LS0tLS1CRUdJTiBQUklWQVRFIEtFWS0tLS0t...

# In your application:
# const cert = Buffer.from(process.env.SSL_CERT, 'base64');

// Storing binary config in JSON
{
  "favicon": "iVBORw0KGgoAAAANSUhEUgAAA...",
  "sslCert": "LS0tLS1CRUdJTiBDRVJUSUZJ..."
}

这种模式常用于云平台（Heroku、Railway、Fly.io），在这些平台中，环境变量是主要的配置机制。

Base64 与 Base64URL

标准 Base64 使用 + 和 /，这些字符在 URL 中不安全。Base64URL 将它们替换为 - 和 _：

快速参考：Base64 命令

# Encode a string
echo -n 'Hello World' | base64
# → SGVsbG8gV29ybGQ=

# Decode a string
echo -n 'SGVsbG8gV29ybGQ=' | base64 --decode
# → Hello World

# Encode a file
base64 < input.bin > output.txt

# Decode a file
base64 --decode < encoded.txt > output.bin

# JavaScript (browser)
btoa('Hello World')        // encode
atob('SGVsbG8gV29ybGQ=')  // decode

# Python
import base64
base64.b64encode(b'Hello World')
base64.b64decode(b'SGVsbG8gV29ybGQ=')

使用我们的工具即时编码和解码 Base64 →