JavaScript获取图片文件高度的函数实现与调用技术问询

首先，我先梳理下你的代码逻辑：通过FileReader读取图片文件为DataURL，再创建Image对象加载该URL，在图片加载完成后获取高度并通过回调返回。这个核心思路是可行的，但代码里存在几个容易导致问题的细节，我先帮你逐一指出：

潜在问题点 #

• 未处理文件为空的情况：如果用户没有选择文件，fileUpload.files[0]会是undefined，调用reader.readAsDataURL会直接抛出错误。
• 缺少文件类型验证：没有判断选择的文件是否为图片类型，非图片文件加载时会失败，甚至返回无意义的高度值。
• 未处理图片加载失败场景：如果图片文件损坏或加载出错，回调函数永远不会被执行，导致代码逻辑卡住。
• 变量命名冗余：fileUpload就是传入的file参数，没必要重复赋值，徒增代码复杂度。

优化后的代码 #

我帮你重构了代码，修复了以上问题并增加了完整的错误处理逻辑：

Util.isImageSize = function(fileInput, callback) {
  // 检查文件输入元素有效性
  if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
    callback(new Error("No file selected"));
    return;
  }

  const file = fileInput.files[0];
  // 验证文件是否为图片类型
  if (!file.type.startsWith('image/')) {
    callback(new Error("Selected file is not an image"));
    return;
  }

  const reader = new FileReader();
  
  reader.onload = function(e) {
    const image = new Image();
    
    image.onload = function() {
      // 成功获取高度，返回高度值（错误参数置为null）
      callback(null, this.height);
    };
    
    image.onerror = function() {
      // 处理图片加载失败的情况
      callback(new Error("Failed to load image file"));
    };
    
    image.src = e.target.result;
  };

  reader.onerror = function() {
    // 处理FileReader读取失败的情况
    callback(new Error("Failed to read file"));
  };

  reader.readAsDataURL(file);
};

调整后的调用方式 #

现在调用时可以同时处理成功和错误场景，避免出现无响应的情况：

Util.isImageSize(document.getElementById('fileImage'), function(error, height) {
  if (error) {
    alert(`Error: ${error.message}`);
    return;
  }
  alert(`Image height: ${height}px`);
});

如果你有具体问题 #

如果以上优化没有解决你的问题，可以补充说明具体的错误现象（比如控制台的报错信息、预期结果和实际结果的差异等），我会进一步帮你排查问题。

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