实现 Base64 编解码工具

分类：developer ｜标签：Base64、编码、解码、转换文本与 Base64 互转，支持 UTF-8 与 URL-safe 模式，可处理文件

2.1 功能说明

文本与 Base64 互转，支持 UTF-8 与 URL-safe 模式，可处理文件

核心能力

encode
decode

2.1.1 使用指南

Base64 编解码使用指南

什么是 Base64？

Base64 是一种基于 64 个可打印字符表示二进制数据的编码方式，常用于在只支持文本的协议（如 HTTP、JSON、邮件）中传输二进制内容，例如图片内联、接口鉴权、数据调试等。

典型场景

图片内联：将小图标转成 data:image/png;base64,... 直接嵌入 CSS/HTML。
接口鉴权：Basic Auth 头 Authorization: Basic base64(user:pass)。
二进制调试：把不可打印字节转成可阅读字符串。

URL-safe 模式

标准 Base64 含 + 与 /，在 URL 中需转义。URL-safe 模式用 - 和 _ 替换，并去掉末尾 = 填充，适合放入链接参数。

隐私说明

所有转换均在浏览器本地完成，不会上传任何数据。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

utf8ToBase64()
base64ToUtf8()
toUrlSafe()
fromUrlSafe()
process()
swapMode()
clearAll()
handleFile()
copy()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

vue

import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const mode = ref('encode')
const urlSafe = ref(false)
const input = ref('')
const output = ref('')
const error = ref('')
const fileBase64 = ref('')

function utf8ToBase64(str) {
  const bytes = new TextEncoder().encode(str)
  let bin = ''
  const chunk = 0x8000
  for (let i = 0; i < bytes.length; i += chunk) {
    bin += String.fromCharCode.apply(null, bytes.subarray(i, i + chunk))
  }
  return btoa(bin)
}

function base64ToUtf8(b64) {
  const bin = atob(b64)
  const bytes = new Uint8Array(bin.length)
  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)
  return new TextDecoder().decode(bytes)
}

function toUrlSafe(b64) {
  return b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
}
function fromUrlSafe(s) {
  let t = s.replace(/-/g, '+').replace(/_/g, '/')
  while (t.length % 4) t += '='
  return t
}

function process() {
  error.value = ''
  output.value = ''
  const raw = input.value
  if (!raw) return

  if (mode.value === 'encode') {
    let b64 = utf8ToBase64(raw)
    if (urlSafe.value) b64 = toUrlSafe(b64)
    output.value = b64
  } else {
    let b64 = raw.trim()
    if (urlSafe.value) {
      b64 = fromUrlSafe(b64)
    }
    if (!/^[A-Za-z0-9+/_-]+=*$/.test(b64) || b64.replace(/=+$/, '').length % 4 !== 0) {
      error.value = '输入的不是合法的 Base64 字符串'
      return
    }
    try {
      output.value = base64ToUtf8(b64)
    } catch (e) {
      error.value = '解码失败：' + e.message
    }
  }
}

function swapMode() {
  // 将当前结果作为另一方向的输入
  if (output.value && !error.value) input.value = output.value
  mode.value = mode.value === 'encode' ? 'decode' : 'encode'
  output.value = ''
  error.value = ''
  process()
}

function clearAll() {
  input.value = ''
  output.value = ''
  error.value = ''
  fileBase64.value = ''
}

function handleFile(file) {
  const reader = new FileReader()
  reader.onload = () => {
    fileBase64.value = String(reader.result)
  }
  reader.onerror = () => ElMessage.error('文件读取失败')
  reader.readAsDataURL(file.raw)
}

async function copy(text) {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('已复制')
  } catch {
    ElMessage.warning('复制失败，请手动选择复制')
  }
}

2.3 效果截图

暂未生成该工具的效果截图。

工具访问地址：https://www.i91tools.com/tools/base64-encoder

实现 Base64 编解码 工具 ​

2.1 功能说明 ​

2.1.1 使用指南 ​