为什么Chrome浏览器中图片上传功能失效，其他浏览器运行正常？

核心问题原因 #

• 加载事件绑定顺序错误：当前代码先给image.src赋值，再绑定onloadend回调。Chrome中DataURL属于本地资源，加载速度极快，会在回调绑定完成前就结束加载，导致回调永远不会触发，这是Chrome下失效的核心原因。
• 事件类型选择不兼容：Image对象的标准加载完成事件是onload，onloadend并非Image的通用兼容事件，Chrome对Image对象的onloadend事件支持存在限制。
• 事件绑定对象错误：你给<button>元素绑定了change事件，只有<input type="file">这类表单输入元素才支持change事件，需要补充隐藏的文件输入元素实现文件选择逻辑。

修复后代码 #

HTML 部分 #

<!-- 新增隐藏的文件输入框，用于选择本地图片 -->
<input type="file" id="inputFile" accept="image/*" hidden>
<button id="buttonUpload" type="button" class="d-inline btn-custom mx-0">
     Upload
</button>

JS 部分 #

var inputUpload = document.getElementById('buttonUpload');
var inputFile = document.getElementById('inputFile');

// 点击按钮触发隐藏的文件选择框
inputUpload.addEventListener('click', () => {
  inputFile.click()
})

inputFile.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return
  const reader = new FileReader();

  reader.onloadend = () => {
    var image = new Image();
    // 先绑定加载完成回调
    image.onload = function() { 
      var height = this.height;
      var width = this.width;
      if (height > 150 || width > 150) {
        showAlert('图片尺寸不能超过150×150像素');
      } else {
        // reader.result已经是完整的图片DataURL，无需额外截取拼接
        updateImg(reader.result);
      }
      // 手动释放内存，避免内存泄漏
      image.src = ''
    };
    // 绑定加载错误回调，避免无报错的异常情况
    image.onerror = function() {
      showAlert('图片加载失败，请检查文件格式是否正确')
    }
    // 最后给src赋值，保证绑定的回调一定能被触发
    image.src = reader.result;
    console.log('image.src', image.src);
  };
  reader.readAsDataURL(file);
});

额外优化说明 #

原来代码中对reader.result做的base64截取再拼接的操作是冗余的，reader.readAsDataURL返回的结果已经是符合要求的标准图片DataURL格式，可以直接使用。

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