在这个被烈日炙烤得几乎要融化的夏日午后，阳光透过窗帘的缝隙，顽强地穿透进来，将我的小屋染成了一片金黄。空气中弥漫着一种沉闷而潮湿的气息，仿佛连呼吸都变得异常艰难。然而，这样的环境并没有阻挡我前进的脚步，反而激发了我内心深处对技术的热爱与追求。
我坐在电脑前，面前是那熟悉的屏幕，上面显示着在线工具库中的Base64文件转换器项目。阳光透过窗户的缝隙，洒在桌面上，与屏幕发出的冷光交织在一起，营造出一种既温暖又科技感十足的氛围。尽管窗外的世界被夏日的酷热所笼罩，但我的小屋里却充满了专注与宁静。
我深吸一口气，决定给这个小工具一个全新的生命。我知道，这不仅仅是一个简单的优化迭代过程，更是一次对自我能力的挑战与提升。我打开了代码编辑器，那熟悉的界面仿佛在向我诉说着过往的故事，而我，则准备用新的篇章来续写它的未来。
随着我深入代码的核心，一系列的问题逐渐浮出水面。编码解码的算法存在严重的缺陷，导致输出结果完全错误；文件处理机制不够高效，偶尔会出现卡顿或崩溃的现象；用户界面也不够友好，用户在使用过程中容易感到困惑和不便。这些问题如同一座座大山，挡在了我的面前，但我并没有因此而退缩。相反，我更加坚定了要克服这些困难的决心。
我开始了漫长而艰辛的修复工作。我仔细分析着每一行代码，寻找着问题的根源所在。我不断地进行调试和测试，确保每一个功能都能正常运行。汗水不断地从我的额头滑落，滴落在键盘上，发出轻微的“滴答”声，那是我在这个酷热夏天里唯一的伴奏。我忘记了时间的流逝，忘记了饥饿与疲惫，只想着尽快解决这些问题。
经过一整天的努力，我终于将所有的问题都一一解决。编码解码的算法得到了优化，输出结果变得准确无误；文件处理机制得到了改进，运行效率显著提升；用户界面也进行了重新设计，变得更加简洁、直观和易用。此外，我还为Base64文件转换器添加了文件的预览功能，让用户在使用过程中能够更加方便地查看文件内容。
然而，我并没有因此而满足。我深知，在这个信息爆炸的时代，一个好的产品不仅需要功能完善、用户体验良好，还需要具备良好的搜索引擎优化（SEO）能力。于是，我又投入到了SEO优化的工作中。我仔细研究着搜索引擎的排名算法和用户的搜索习惯，对网站的标题、描述、关键词等进行了精心的优化和调整。同时，我还加强了网站的内容建设，增加了更多有价值的信息和资源，以吸引更多的用户访问和分享。
当夜幕降临，我终于完成了所有的工作。我疲惫地靠在椅子上，望着窗外那片已经被夜色笼罩的天空。虽然身体感到无比的疲惫和沉重，但我的心中却充满了喜悦和成就感。我知道，经过这一天的努力，我的Base64文件转换器已经完成了它的1.0版本，它将以一个全新的面貌出现在用户面前，为他们带来更加便捷、高效和友好的体验。
这个酷热的夏天见证了我的坚持与努力，也让我更加坚信了自己的梦想和追求。在未来的日子里，我将继续在这个充满挑战和机遇的时代中前行，用我的智慧和汗水去创造更多有价值的作品和服务。我相信，只要我保持对技术的热爱与追求，不断学习和进步，就一定能够在这个领域中取得更加辉煌的成就。
base64转文件，自动解析扩展名，提供预览和下载功能
文件转base64，上传文件，自动编码为base64并输出，提供复制功能
<template>
<tool-info :tool="tool" :readme="VueComponent">
<template #body>
<el-card shadow="never">
<el-tabs v-model="activeName">
<el-tab-pane :label="$t('tools.base64-file-converter.tab.file.title')" name="file">
<el-row>
<el-col :span="24">
<el-upload ref="upload" action="#" :auto-upload="false" drag :on-change="onUpload" :limit="1" :on-exceed="handleExceed">
<el-text> {{$t('tools.base64-file-converter.tab.file.input.placeholder')}}</el-text>
</el-upload>
</el-col>
</el-row>
<el-divider/>
<el-row>
<el-col :span="24">
<el-input type="textarea" :value="fileBase64" readonly :placeholder="$t('tools.base64-file-converter.tab.file.output.placeholder')" :rows="10"/>
</el-col>
</el-row>
<el-divider/>
<el-row>
<el-col :span="24" align="center">
<el-button @click="copyFileBase64">{{$t('tools.base64-file-converter.tab.file.button.copy')}}</el-button>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane :label="$t('tools.base64-file-converter.tab.base64.title')" name="base64">
<el-form label-width="auto" :model="base64Form">
<el-row :gutter="50">
<el-col :xs="24" :sm="12" :md="12">
<el-form-item prop="fileName" :rules="[]" :label="$t('tools.base64-file-converter.tab.base64.input.file-name')">
<el-input v-model="base64Form.fileName" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12">
<el-form-item prop="extension" :rules="[{ required: true, message: '请输入文件扩展名', trigger: 'change' }]" :label="$t('tools.base64-file-converter.tab.base64.input.file-suffix')">
<el-input v-model="base64Form.extension" />
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :span="24">
<el-form-item prop="base64Input" :rules="[{ validator:isValidBase64, trigger: 'change' }]">
<el-input type="textarea" v-model="base64Form.base64Input" :placeholder="$t('tools.base64-file-converter.tab.base64.input.placeholder')" :rows="10" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider/>
<el-row >
<el-col :span="24" align="center">
<el-button @click="isPreview = true">{{$t('tools.base64-file-converter.tab.base64.button.preview')}}</el-button>
<el-button @click="downloadFile">{{$t('tools.base64-file-converter.tab.base64.button.download')}}</el-button>
</el-col>
</el-row>
<el-divider/>
<object :data="base64Form.base64Input" :type="base64Form.mimeType" v-if="isPreview" style="width: 100%; height: 500px;">
<p>抱歉，您的浏览器不支持预览此文件。</p>
</object>
</el-tab-pane>
</el-tabs>
</el-card>
</template>
</tool-info>
</template>
<script setup lang="ts">
import { tool } from './index';
import { useBase64 } from '@vueuse/core';
import type { Ref } from 'vue';
import { useCopy } from '@/composables/copy';
import {getMimeTypeFromBase64,getExtensionFromMimeType,getMimeTypeFromExtension,downloadFromBase64 } from '@/composables/downloadBase64';
import { isValid } from 'js-base64'
import { ref,reactive,watch } from 'vue';
import type { UploadInstance, UploadProps, UploadRawFile,UploadFile} from 'element-plus'
import { genFileId } from 'element-plus'
import ToolInfo from '@/components/ToolInfo.vue';
import {VueComponent} from './README.md';
const upload = ref<UploadInstance>()
const activeName = ref('file')
const isPreview = ref(false)
const base64Form = reactive({
base64Input: '',
fileName: 'file',
extension: '',
mimeType: '',
})
const fileInput = ref() as Ref<File>;
const { base64: fileBase64 } = useBase64(fileInput);
const { copy: copyFileBase64 } = useCopy({ source: fileBase64});
function downloadFile(){
downloadFromBase64( {
sourceValue: base64Form.base64Input,
filename: base64Form.fileName,
extension: base64Form.extension,
})
}
async function onUpload(file: UploadFile) {
if (file) {
fileInput.value = file.raw as File
}
}
const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
upload.value!.handleStart(file)
}
function isValidBase64(rule: any, value: any, callback: any) {
let cleanStr = value.trim().replace(/^data:.*?;base64,/, '')
if(!isValid(cleanStr)){
callback(new Error('请输入正确的base64文本'))
}
callback()
}
watch(()=>{return base64Form.base64Input},
(newValue,_) => {
const { mimeType } = getMimeTypeFromBase64({ base64String: newValue });
if (mimeType) {
base64Form.mimeType = mimeType;
base64Form.extension = getExtensionFromMimeType(mimeType) || base64Form.extension;
isPreview.value = false;
}
},
);
watch(()=>{return base64Form.extension},
(newValue,_) => {
const mimeType = getMimeTypeFromExtension[newValue];
if (mimeType) {
base64Form.mimeType = mimeType;
let cleanStr = base64Form.base64Input.trim().replace(/^data:.*?;base64,/, '')
base64Form.base64Input = `data:${mimeType};base64,${cleanStr}`
}
},
);
</script>
