TypeError: FileReader执行readAsDataURL报参数非Blob类型错误如何解决

错误原因 #

• 逻辑位置错误+变量名冲突：你在HTML的onchange事件中给fileValidation函数传入的是当前input DOM元素，但函数定义时参数名写为reader，而你仅在文件格式符合要求的if分支内才会创建新的FileReader实例赋值给reader，但reader.readAsDataURL(file)写在了if分支外部。如果文件格式不符合要求、或者用户取消文件选择，不会走到if分支的赋值逻辑，此时调用readAsDataURL的变量实际上是input DOM元素，不是Blob类型，直接触发报错。
• 缺少空值校验：未判断用户是否真的选择了文件，若取消选择file变量为undefined，传入方法也会触发类型错误。
• 提示语DOM操作错误：你用replaceWith替换了#responsefromfileupload节点，下次再触发文件选择事件时会找不到该节点，应该用html()方法修改节点内容而非替换节点本身。
• 缺少预览元素：HTML代码中没有定义id为previewImg的图片标签，就算文件读取成功也无法展示预览。

修正后代码 #

HTML代码 #

<form style="padding-top:10px;" method="post" action="upload.php" enctype="multipart/form-data">
  <input style="padding-bottom: 20px;" type="file" id="file" name="file" onchange="fileValidation(this);">
  <!-- 新增预览图片标签 -->
  <img id="previewImg" style="margin-left:25%;display:none;" alt="预览图">
  <div id="responsefromfileupload" value=""></div>
</form>

JavaScript代码 #

function fileValidation(fileInput) {
  // 先判断是否选中了文件
  if (!fileInput.files || !fileInput.files[0]) {
    $("#responsefromfileupload").html(`<div style="width: 50%;" class="alert alert-danger" role="alert">未选择有效文件</div>`);
    $("#previewImg").hide();
    return;
  }
  var file = fileInput.files[0];
  var filePath = fileInput.value;
  // 允许的文件类型
  var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;

  if (!allowedExtensions.exec(filePath)) {
    $("#responsefromfileupload").html(`<div style="width: 50%;" class="alert alert-danger" role="alert">该图片格式不被支持！</div>`);
    $("#previewImg").hide();
    return;
  }
  // 格式校验通过才执行读取逻辑
  var reader = new FileReader();
  reader.onload = function () {
    $("#previewImg").attr("src", reader.result).show();
    $("#responsefromfileupload").html('');
  }
  reader.readAsDataURL(file);
}

内容的提问来源于stack exchange，提问作者Blake Price