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

【问题标题】：Uncaught DOMException: Failed to execute 'readAsDataURL' on 'FileReader'未捕获的 DOMException：无法在“FileReader”上执行“readAsDataURL”
【发布时间】：2020-01-10 07:06:14
【问题描述】：

我的任务是创建和上传图像文件，但我遇到了 blob 和 base64 项目的问题，Blob URL 按预期工作，但是当我尝试使用 FileReader 时，它显示项目正忙于读取 blob。我还尝试删除 URL 的代码文件以保留文件阅读器代码，但仍然存在相同的问题。以及每次创建base64后如何停止它时如何调用onload。或者是否也可以将 blob URL 转换为 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;
  }
},

【问题讨论】：

您在 console.log() 中拼错了控制台。也许它会挂在上面？
感谢您的纠正，但没有:(

标签： javascript vue.js base64 filereader

【解决方案1】：

试试这个方法

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

【讨论】：

【解决方案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);
}

【讨论】：