未捕获的 DOMException：无法在“FileReader”上执行“readAsDataURL”

Question

I have been task to create and upload image file but i am having issue with the blob and base64 items the Blob URL is working as expected but when i try to use a FileReader it is showing the item is busy reading blob. I have also tried to remove the code files for URL the retain the File Reader code but still same issues. And also how the onload is called every time how to stop it after the base64 is created. Or is it also posible to convert the blob URL to a base64

 uploadImageChange(e){
  const file = e.target.files[0];
  this.showImageModalErrorMessage = false;
  let fileReader = new FileReader();
  fileReader.onload = function(fileLoad){
    console.log(fileReader.readAsDataURL(file));
  }
  if(file.size < 2000){
    this.imageSelectedUrl = URL.createObjectURL(file);
    this.showImageSaveContent = true;
    this.modalSecondInstruction = true;
  }else{
    this.imageModalErrorMessage = "The image you chose is bigger than 2 MB. Kindly upload a smaller-sized photo."
    this.showImageModalErrorMessage = true;
  }
},

Answer 1

Try this way

let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(fileLoad){
consoloe.log(fileReader.result);
}

Answer 2

Had a similar problem, the below code worked for me fine.

fileReader(file: any) {
  const reader = new FileReader();
  reader.onloadend = () => {
    const formData = new FormData();
    const blobFile = new Blob([reader.result], { type: file.type });
    formData.append("file", blobFile, "filename");
    // POST formData call
  };
  reader.readAsArrayBuffer(file);
}