图片url转换为base64 vue

在Vue.js中，将图片URL转换为Base64编码通常用于需要在线展示图片或上传服务器时，由于直接发送URL可能会存在安全性和性能问题。你可以通过JavaScript的`FileReader` API来实现这个功能。以下是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      imageUrl: '',
      imageAlt: '点击选择图片',
    };
  },
  methods: {
    uploadImage(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (event) => {
        this.imageUrl = event.target.result;
      };
      reader.onerror = () => {
        console.error('读取文件失败');
      };
    },
  },
};
</script>

在这个例子中，当用户选择文件后，`FileReader`会读取文件内容并将其转换成Base64格式的字符串。然后，`this.imageUrl`就会存储这个Base64字符串，它可以直接绑定到`<img>`标签的`src`属性上。