一个为了样式定制化而直接将图片存在css代码里所以要将图片转成base64的方案

本文通过一个Vue的DEMO展示了如何处理文件上传，将图片转换为Base64编码并实时预览。用户可以选择图片，然后利用FileReader API将文件转化为Base64，直接显示在页面上，无需依赖上传服务或外部链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：

在思考如何能在平台中满足导入导出来定制化样式，并能直接引入样式预览效果，一些图片，就直接写成base64存放，不需要依赖上传服务或者引用外链，所以就有了这篇练习文章。

初始变量存放的base64还好，自己直接找在线平台转一下就能得到了（www.base64-image.de，这个站点还不错），但是如果需要直接input file去替换现有的变量，就要对change file进行转换处理。

先来看看最终效果

这里还是用我熟悉又方便的vue来编写demo

<template>
  <div id="app">
    <button @click="upload" style="margin-bottom: 15px">上传图片</button>
    <input
      type="file"
      ref="fileRef"
      style="display: none"
      accept="image/png, image/jpeg"
      @change="changeFile"
    />
    <div style="display: flex">
      <div class="img" style="width: 50%">
        <div>图片预览</div>
        <img
          :src="base64"
          alt="img"
          v-if="base64"
          style="width: 500px; height: 500px;object-fit:cover"
        />
      </div>
      <div class="base64" style="width: 50%">
        <div>base64 输出</div>
        <textarea v-model="base64" rows='30' cols='50' />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const img = ref("");
const base64 = ref("");

const fileRef = ref(null);

function convertBase64(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);

    fileReader.onload = () => {
      resolve(fileReader.result);
    };

    fileReader.onerror = (error) => {
      reject(error);
    };
  });
}

function upload() {
  fileRef.value.click();
}

async function changeFile(event) {
  const file = event.target.files[0];
  const data = await convertBase64(file);
  console.log("data:", data);
  base64.value = data;
}
</script>

在线示例：

https://codepen.io/pen?template=QWxMPYj

希望能帮助到有需要的小伙伴。