vue3图片转base64

在Vue3中，可以使用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[0];
      const reader = new FileReader();

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

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

在上述代码中，我们通过`<input type="file">`元素监听文件选择事件`@change`，然后在`handleFileChange`方法中获取选中的文件对象。接下来，我们创建一个`FileReader`对象，并通过`readAsDataURL`方法将文件读取为Data URL。最后，将读取到的Data URL赋值给`base64Image`变量，从而实现图片转换为Base64并显示在页面上。