vue 图片转base64

在Vue中，可以使用HTML5的FileReader对象将图片文件转换为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[0];
      const reader = new FileReader();

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

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

在上面的代码中，我们使用`<input type="file">`元素来选择图片文件，并通过`@change`事件监听文件选择的变化。当文件选择变化时，`handleFileChange`方法会被调用。

在`handleFileChange`方法中，我们首先获取选择的文件对象，然后创建一个FileReader对象。接下来，我们设置`onload`事件处理程序，当文件读取完成时，会触发该事件处理程序。

在事件处理程序中，我们可以通过`reader.result`获取到读取的文件内容，这里就是图片的Base64编码。最后，将Base64编码赋值给`base64Image`属性，以便在页面上显示转换后的图片。

请注意，上述代码只是一个简单的示例，你可以根据自己的需求进行修改和扩展。