vue图片转base64

在Vue中，可以使用HTML5的File API来实现将图片转换为Base64格式的功能。以下是一个简单的示例代码：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <img :src="base64Image" alt="Converted Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      base64Image: ''
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files;
      const reader = new FileReader();

      reader.onload = () => {
        this.base64Image = reader.result;
      };

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

在上面的代码中，我们首先在模板中添加了一个文件选择输入框和一个用于显示转换后图片的`<img>`标签。然后，在`handleFileChange`方法中，我们获取用户选择的文件，并创建一个`FileReader`对象来读取文件内容。通过调用`readAsDataURL`方法，我们将文件内容转换为Base64格式，并将结果赋值给`base64Image`变量。最后，我们在模板中使用`base64Image`变量来显示转换后的图片。