[Vuejs]-Return string value of reader.result on FileReader

by

-1👍

✅

Assuming you are working on a Vue app (let me know if don’t):

Just use the imageBase64 variable wherever you want in your template, it will be updated once the file is loaded.

data () {
  return {
    imageBase64: ''
  }
},

methods: {
  uploadFile() {
    let vm = this;
    var file = vm.$refs["testeLogo"].files[0];
    var reader = new FileReader();

    reader.onloadend = function() {
      document.querySelector("#supe").setAttribute("src", this.imagem);
      
      vm.imageBase64 = reader.result
    };

    reader.readAsDataURL(file);
  }
}

Also remember to not query the DOM directly using Vue, you can directly bind imagem variable to the img src attribute:

<img :src="imagem" alt="" />

Leave a comment