vue3 将图片url转base64

在 Vue 3 中，将图片 URL 转换为 base64 编码通常需要用到浏览器提供的 `FileReader` API 和一些辅助函数。以下是基本步骤：

1. 获取图片文件：首先，你需要获取到用户的图片文件，这通常是通过 HTML 的 `input[type="file"]` 元素让用户选择文件。

<input type="file" @change="uploadImage">

2. 定义上传方法 (`uploadImage`):

methods: {
  uploadImage(e) {
    const file = e.target.files[0]; // 获取用户选择的第一个文件
    if (file) {
      this.convertImageToBase64(file);
    }
  },
}

3. 实现转换函数 (`convertImageToBase64`):

async function convertImageToBase64(file) {
  const reader = new FileReader();
  reader.readAsDataURL(file); // 使用 FileReader 读取文件内容

  await new Promise((resolve, reject) => { // 等待读取完成
    reader.onload = function (event) {
      resolve(event.target.result); // 当图片加载完毕，结果就是 base64 编码
    };
    reader.onerror = reject; // 错误处理
  });

  this.base64Image = reader.result; // 将 base64 保存到组件的数据属性中
}

现在，`this.base64Image` 就存储了图片的 base64 编码。你可以将其用于发送请求、显示在 img 标签里或者其他需要的地方。记得处理跨域问题，如果图片来自不同的域名。