图片预览正常却触发readAsDataURL Blob类型错误，求原因分析

嘿，这个问题我之前也碰到过！咱们先拆解下为啥会出现「图片能正常预览但控制台报错」的矛盾情况：

你用了for...in来遍历FileList对象，但FileList是类数组对象——它除了包含对应文件的数字索引键（比如0、1），还自带了length、item这类额外属性。当for...in循环到这些属性时，files[key]拿到的就不是File（也就是Blob类型）了，这时候调用readAsDataURL自然就会抛出类型错误。而图片能正常显示，是因为循环到数字索引时，对应的文件是正常的Blob，成功完成了读取和渲染；报错的是那些额外属性的处理过程，不影响已成功的图片加载。

修正后的代码方案 #

你可以换成几种更安全的遍历方式，彻底解决这个报错：

方案1：普通for循环（兼容所有旧浏览器） #

$('#image-upload-input').on('change', function() {
  var files = document.getElementById('image-upload-input').files;
  // 基于索引遍历，只处理实际的文件对象
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    reader.onload = function(e) {
      $('.image-upload-container').append('<img src="'+ e.target.result +'" style="width: 100px;">');
    }
    reader.readAsDataURL(file);
  }
});

方案2：for...of循环（ES6+，写法更简洁） #

$('#image-upload-input').on('change', function() {
  var files = document.getElementById('image-upload-input').files;
  // for...of会自动跳过FileList的额外属性，只遍历实际文件
  for (const file of files) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('.image-upload-container').append('<img src="'+ e.target.result +'" style="width: 100px;">');
    }
    reader.readAsDataURL(file);
  }
});

方案3：转数组后用forEach（ES6+，语义化更强） #

$('#image-upload-input').on('change', function() {
  var files = Array.from(document.getElementById('image-upload-input').files);
  // 转成数组后用forEach遍历，确保只处理文件对象
  files.forEach(file => {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('.image-upload-container').append('<img src="'+ e.target.result +'" style="width: 100px;">');
    }
    reader.readAsDataURL(file);
  });
});

这几种方式都能精准遍历FileList里的实际文件对象，不会触发额外属性的错误读取，控制台就不会再报错啦。

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