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

Question

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

这是我根据阅读的指南尝试的方法：

输入：

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

处理图片:

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);
}

Img个人函数执行后的值：

imgPersonal:"ÿØÿàJFIFÿÛC\n \n  \n$ &%# #"(-90(*6+"#2D26;=@@@&0FKE>J9?@=ÿÛC =)#)==================================================ÿÀ"ÿÄ \nÿÄµ}!1AQa"q2¡#B±ÁRÑðbr \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)
  })
}

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

How to convert image from file input to base64 url in vue?

base64

vue.js

vuejs2