Uncaught DOMException: не удалось выполнить readAsDataURL для FileReader

Question

У меня была задача создать и загрузить файл изображения, но у меня возникли проблемы с элементами BLOB-объектов и base64, URL-адрес BLOB-объектов работает должным образом, но когда я пытаюсь использовать FileReader, он показывает, что элемент занят чтением BLOB-объектов. Я также попытался удалить файлы кода для URL, чтобы сохранить код чтения файлов, но все еще проблемы. А также как каждый раз вызывается onload, как остановить его после создания base64. Или же возможно преобразовать URL-адрес BLOB-объекта в 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

Попробуйте вот так

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

Answer 2

Была похожая проблема, код ниже работал у меня нормально.

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