Angular项目中文件输入转Base64报错：参数非Blob类型

嘿，我一眼就瞅出问题所在啦——你调用reader.readAsDataURL()的时候传错参数了！你传的是event，但这个方法要求的是Blob类型的对象，也就是你已经获取到的file变量呀。

修正后的完整代码 #

模板部分不用改动，保持你原来的就行：

<input type="file" (change)="handleUpload($event)">

处理函数修改成这样：

handleUpload(event) {
  const file = event.target.files[0];
  // 加个判断，防止用户打开选择框后又取消操作
  if (!file) return;
  
  const reader = new FileReader();
  // 这里把event改成file！这是核心修正点
  reader.readAsDataURL(file);
  
  reader.onload = () => {
    console.log(reader.result); // 现在就能正常输出Base64格式的文件内容啦
  };

  // 额外添加错误处理，让代码更健壮
  reader.onerror = (error) => {
    console.error('文件读取失败:', error);
  };
}

为什么会报错？ #

你之前的代码里，event.target.files[0]已经正确拿到了选中的文件（它是Blob的子类，符合readAsDataURL的参数要求），但后续调用方法时错误地传入了event对象，而不是这个file，这就导致浏览器抛出「参数不是Blob类型」的 TypeError。

另外，加上if (!file)的判断是个实用的小细节，能避免用户打开文件选择框又取消时，file为undefined引发的额外问题；而onerror回调则能帮你在文件损坏、读取权限不足等异常场景下及时捕获并处理错误。

内容的提问来源于stack exchange，提问作者Sandra Willford