vue项目base64转img方式

下面我来详细讲解"Vue项目Base64转Img方式"的完整攻略。

什么是Base64？

Base64是一种将二进制数据编码成ASCII字符的方式。通过这种方式，可以将图片、音频、视频等二进制数据以文本的形式传输或储存。在Vue项目中，我们可以使用Base64方式将图片转化为文本，方便传输和储存。

Base64转Img的原理

将一个图片文件使用Base64编码后，会得到一串文本。这段文本可以通过<img>标签的src属性值来显示图片。这样就可以实现在Vue项目中使用Base64方式显示图片了。

Base64转Img的步骤

下面是将图片文件转换成Base64以及在Vue项目中使用Base64方式显示图片的步骤：

步骤1：使用Base64编码将图片转换成文本

我们可以使用一些在线工具或者编写JavaScript代码来将图片文件转换成Base64文本，以下是使用JavaScript将图片文件编码成Base64的代码示例：

const reader = new FileReader();
const file = document.getElementById('file').files[0];

reader.onloadend = () => {
  const base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
  console.log(base64String); // 显示Base64文本
};

reader.readAsDataURL(file);

以上代码中，首先通过FileReader对象读取图片文件，然后使用result属性获取图片文件的Base64文本，之后将Base64中的前缀data:和前面所有无用的字符正则删除，最终得到的字符串就是所需的Base64文本。

步骤2：在Vue项目中使用Base64方式显示图片

我们可以将上述代码获取到的Base64文本，直接放在Vue组件中的<img>标签的src属性值中，就可以实现在Vue项目中使用Base64方式显示图片。以下是基于前端框架Element-UI简单实现的例子：

<template>
  <div>
    <el-upload
      action=""
      :show-file-list="false"
      :on-change="handleUploadChange"
    >
      <el-button slot="trigger">点击上传</el-button>
    </el-upload>

    <img v-if="imgBase64" :src="imgBase64" alt="img" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgBase64: null
    };
  },
  methods: {
    handleUploadChange(file) {
      const reader = new FileReader();

      reader.onloadend = () => {
        const base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
        this.imgBase64 = `data:image/png;base64,${base64String}`;
      };

      reader.readAsDataURL(file.raw);
    }
  }
};
</script>

以上代码中，我们通过Element-UI的<el-upload>组件实现了文件上传，并通过FileReader将上传的图片文件编码成Base64，然后将结果赋值给数据属性imgBase64，最后在模板中使用<img>标签的src属性值来动态显示图片。图片的前缀为data:image/png;base64,，其中image/png可以根据不同图片类型进行替换。

另外，我们也可以在Vue项目中使用第三方库如vue-base64-upload或者vue-base64-image来轻松实现图片Base64转换以及显示。