[Vuejs]-How to take image or file to a variable in vue?

by

1👍

✅

toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function () {
    var reader = new FileReader();
    reader.onloadend = function () {
      callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
  };
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.send();
},
readFile() {
  this.example = this.$refs.file.files[0];
  if (
    this.example.name.includes(".png") ||
    this.example.name.includes(".jpg")
  ) {
    this.image = true;
    this.preview = URL.createObjectURL(this.example);

    this.toDataURL(this.preview, (dataUrl) => {
      var imgBase64 = dataUrl.split("data:image/png;base64,");
      this.imageData = imgBase64[1];
      console.log(this.imageData);
     
    });
  } else {
    this.image = false;
  }
},

the exit will be base64 in string

Leave a comment