vue在线图片转base64

Vue.js 在线图片转 Base64 是一种常见的前端操作，用于将图片文件转换为浏览器支持的数据URL，以便于在网页上显示或在网络请求中作为数据发送。你可以使用 JavaScript 的 FileReader API 实现这个功能。以下是一个简单的 Vue 组件示例：

<template>
  <div>
    <input type="file" @change="uploadImage" />
    <img :src="imageUrl" :alt="imageTitle" v-if="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      imageTitle: ''
    };
  },
  methods: {
    uploadImage(e) {
      const file = e.target.files;
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          this.imageUrl = `data:image/${file.type};base64,${event.target.result}`;
          // 更新图片标题，这里仅作示例，实际应用可能需要根据文件名或其他信息获取
          this.imageTitle = file.name;
        };
        reader.readAsDataURL(file);
      }
    }
  }
};
</script>

在这个例子中，用户选择图片后，`uploadImage` 方法会创建一个 `FileReader` 对象读取文件内容。当读取完成后，它会触发 `onload` 事件，并将 Base64 编码后的字符串设置给 `imageUrl` 数据绑定到的 `<img>` 标签。