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

user_15972371 0
Viewed 576

I have tried to convert an image from file input in vue, I'm not so sure I did it in the proper way. What I want to achieve is to get the Image url, assign it to a data variable and push it into my mongoose DB

That's what I tried based on a guide I read:

Input:

    <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 value after the functions has been executed:

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

I have tried also with readAsDataURL(), seems like the same outcome

Any suggestions?

vuejs2 vue.js base64
1 Answers

I'm using this function to convert files to base64. Works fine for me:

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