如何在vue中将图像从文件输入转换为base64 url​​？

Question

我试图从 vue 中的文件输入转换图像，但我不确定我是否以正确的方式进行了转换。 我想要实现的是获取图像 url，将其分配给数据变量并将其推送到我的 mongoose 数据库中

这就是我根据阅读的指南尝试过的：

输入：

    <div class="singleInput50">
      <span>Personal Image:</span>
      <input type="file" @change="handleImage" accept="image/*">
    </div>

HandleImage：

handleImage(e) {
      const selectedImage = e.target.files[0];
      this.createBase64Image(selectedImage);
    },

createBase64Image：

createBase64Image(fileObject) {
  const reader = new FileReader();

  reader.onload = (e) => {
    this.userObject.imgPersonal = e.target.result;
  };
  reader.readAsBinaryString(fileObject)
  console.log("file object", fileObject);
}

函数执行后的ImgPersonal值：

imgPersonal:"ÿØÿàJFIFÿÛC\n \n  \n$ &%# #"(-90(*6+"#2D26;=@@@&0FKE>J9?@=ÿÛC =)#)==================================================ÿÀ"ÿÄ \nÿĵ}!1AQa"q2¡#B±ÁRÑð$3br \n%&'()*456789:CDEFGH

我也尝试过 readAsDataURL()，结果似乎相同

有什么建议吗？

Answer 1

我正在使用此函数将文件转换为 base64。适合我：

export default function (blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onerror = reject
    reader.onload = () => {
      resolve(reader.result)
    }
    reader.readAsDataURL(blob)
  })
}