在日常开发与设计中，我们经常需要在不同场景下使用 Base64 编码来处理图片。无论是为了减少 HTTP 请求在 HTML/CSS 中直接嵌入图片，还是在 JSON 中传输图片信息，一个安全、便捷且私密的转换工具都必不可少。
✨ 核心功能与特点
- 双向转换，轻松便捷
- 图片 → Base64：上传图片文件，工具将自动将其转换为 Base64 编码字符串。您可以直接复制编码，并实时预览原图效果。
- Base64 → 图片：粘贴 Base64 编码字符串，工具能智能识别（无论是否带有
data:image/...;base64,前缀），即时转换为可预览的图片，并支持一键下载还原。
- 广泛格式支持与合理限制
- 支持格式：全面兼容常见的网页图片格式，包括 JPG、PNG、GIF、WebP、BMP。
- 文件大小：单次处理最大支持 10MB 的图片文件，足以满足绝大多数日常使用场景。
- 隐私安全，纯前端处理
- 您的图片文件全程不会上传至任何服务器。所有编码与解码计算均在您当前的浏览器中完成，从根源上保障了图片内容的私密性。
- 开源透明，即开即用
- 代码完全开源，技术过程透明可信。界面简洁直观，无需安装任何软件，打开网页即可使用。
💻 完整 Vue 3 + TypeScript 代码实现
以下是该工具的核心代码实现，基于 Vue 3、TypeScript 和 Element Plus 组件库构建：
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
import { copy } from '@/utils/string'
const info = reactive({ title: "Base64 图片转换" })
const MAX_FILE_SIZE = 10 * 1024 * 1024
const ALLOWED_FORMATS = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/bmp']
const uploadRef = ref()
const fileList = ref()
const imagePreviewUrl = ref('')
const base64Result = ref('')
const base64Input = ref('')
const imageFromBase64 = ref('')
const errorMsg = ref('')
const activeTab = ref('imageToBase64')
const handleFileChange = (uploadFile: any) => {
const file = uploadFile.raw
if (!file) return
if (!ALLOWED_FORMATS.includes(file.type)) {
ElMessage({ message: '不支持的文件格式，请上传图片文件', type: 'error', duration: 2000 })
return
}
if (file.size > MAX_FILE_SIZE) {
ElMessage({ message: '文件大小超过限制（最大 10MB）', type: 'error', duration: 2000 })
return
}
const reader = new FileReader()
reader.onload = (e) => {
const result = e.target?.result as string
base64Result.value = result
imagePreviewUrl.value = result
errorMsg.value = ''
}
reader.onerror = () => {
ElMessage({ message: '文件读取失败', type: 'error', duration: 2000 })
}
reader.readAsDataURL(file)
}
const convertBase64ToImage = () => {
errorMsg.value = ''
imageFromBase64.value = ''
const base64Str = base64Input.value.trim()
if (!base64Str) {
ElMessage({ message: '请输入 Base64 编码', type: 'warning', duration: 2000 })
return
}
try {
if (base64Str.startsWith('data:image/')) {
imageFromBase64.value = base64Str
} else {
const formattedBase64 = `data:image/png;base64,${base64Str}`
imageFromBase64.value = formattedBase64
}
} catch (error) {
errorMsg.value = 'Base64 编码格式错误，请检查输入'
ElMessage({ message: 'Base64 编码格式错误', type: 'error', duration: 2000 })
}
}
const copyBase64 = () => {
if (!base64Result.value) {
ElMessage({ message: '暂无 Base64 编码可复制', type: 'warning', duration: 2000 })
return
}
copy(base64Result.value)
}
const downloadImage = (dataUrl: string, filename: string = 'image.png') => {
if (!dataUrl) {
ElMessage({ message: '暂无图片可下载', type: 'warning', duration: 2000 })
return
}
try {
const link = document.createElement('a')
link.href = dataUrl
link.download = filename
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
ElMessage({ message: '下载成功', type: 'success', duration: 1500 })
} catch (error) {
ElMessage({ message: '下载失败', type: 'error', duration: 2000 })
}
}
const downloadConvertedImage = () => {
if (!imageFromBase64.value) {
ElMessage({ message: '请先转换 Base64 编码', type: 'warning', duration: 2000 })
return
}
const mimeType = imageFromBase64.value.match(/^data:(image\/ [a-zA-Z]+);base64,/)?.[1] || 'image/png'
const ext = mimeType.split('/')[1] || 'png'
const filename = `converted-image.${ext}`
downloadImage(imageFromBase64.value, filename)
}
const clearImageToBase64 = () => {
base64Result.value = ''
imagePreviewUrl.value = ''
errorMsg.value = ''
if (uploadRef.value) {
uploadRef.value.clearFiles()
}
}
const clearBase64ToImage = () => {
base64Input.value = ''
imageFromBase64.value = ''
errorMsg.value = ''
}
const handleExceed = () => {
uploadRef.value?.clearFiles()
ElMessage({ message: '只能上传一个文件，请先清除已上传的文件', type: 'warning', duration: 2000 })
}
</script>
<template>
<div>
<DetailHeader :title="info.title"></DetailHeader>
<div>
<el-tabs v-model="activeTab" type="border-card">
<el-tab-pane label="图片转 Base64" name="imageToBase64">
<div>
<div>
<el-upload ref="uploadRef" v-model:file-list="fileList" accept="image/*" :auto-upload="false" :on-change="handleFileChange" :on-exceed="handleExceed" :limit="1" :show-file-list="true">
<el-button type="primary">选择图片文件</el-button>
<template #tip>
<div>支持 JPG、PNG、GIF、WebP、BMP 格式，最大 10MB</div>
</template>
</el-upload>
</div>
<div v-if="imagePreviewUrl">
<div>
<el-text>图片预览</el-text>
<div>
<img :src="imagePreviewUrl" alt="预览图片">
</div>
</div>
<div>
<div>
<el-text>Base64 编码结果</el-text>
<div>
<el-button type="primary" size="small" @click="copyBase64">复制编码</el-button>
<el-button type="danger" size="small" @click="clearImageToBase64">清空</el-button>
</div>
</div>
<el-input v-model="base64Result" type="textarea" :rows="8" readonly placeholder="Base64 编码将显示在这里"></el-input>
</div>
</div>
<div v-else>
<el-empty :image-size="150" description="请上传图片文件"></el-empty>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="Base64 转图片" name="base64ToImage">
<div>
<div>
<el-text>输入 Base64 编码</el-text>
<div>
<el-input v-model="base64Input" type="textarea" :rows="8" placeholder="请输入 Base64 编码（支持带或不带 data:image/...;base64, 前缀）"></el-input>
</div>
<div>
<el-button type="primary" @click="convertBase64ToImage">转换为图片</el-button>
<el-button type="danger" @click="clearBase64ToImage">清空</el-button>
</div>
</div>
<div v-if="imageFromBase64">
<div>
<div>
<el-text>图片预览</el-text>
<el-button type="success" size="small" @click="downloadConvertedImage">下载图片</el-button>
</div>
<div>
<img :src="imageFromBase64" alt="转换后的图片">
</div>
</div>
</div>
<div v-else>
<el-empty :image-size="150" description="请输入 Base64 编码并点击转换"></el-empty>
</div>
</div>
</el-tab-pane>
</el-tabs>
<div v-if="errorMsg">
<el-alert type="error" :title="errorMsg" show-icon :closable="true" @close="errorMsg = ''"></el-alert>
</div>
</div>
<ToolDetail title="功能说明">
<el-text>
<ul>
<li><strong>图片转 Base64：</strong>上传图片文件，自动转换为 Base64 编码字符串，支持复制和预览</li>
<li><strong>Base64 转图片：</strong>输入 Base64 编码字符串，转换为可预览的图片，支持下载</li>
<li><strong>支持的格式：</strong>JPG、PNG、GIF、WebP、BMP</li>
<li><strong>文件大小限制：</strong>最大支持 10MB 的图片文件</li>
<li><strong>智能识别：</strong>自动识别带或不带 data:image/...;base64, 前缀的 Base64 编码</li>
</ul>
</el-text>
</ToolDetail>
<ToolDetail title="使用场景">
<el-text>
<ul>
<li>在 HTML/CSS 中直接嵌入图片，减少 HTTP 请求</li>
<li>在 JSON 数据中传输图片信息</li>
<li>在移动应用开发中存储和传输图片</li>
<li>在邮件中嵌入图片</li>
<li>在数据 URI 中使用图片</li>
</ul>
</el-text>
</ToolDetail>
</div>
</template>
<style scoped>
.space-y-4 > * + * {
margin-top: 1rem;
}
</style>
