JavaScript事件回调内return语句未按预期生效问题

• 你在change事件回调里写的return imageURL没有任何实际效果：事件监听器的回调是浏览器检测到文件选择变化时自动调用的，浏览器不会接收、保存你return出来的值，这个返回值生成后会被直接丢弃，根本不会传到你写的其他业务逻辑里。
• const imageURL是声明在if判断的代码块内部的常量，遵循JavaScript块级作用域规则，只有这个if块内部的代码能访问到它，块外、文档其他位置的逻辑完全拿不到这个值。
• 额外提醒：URL.createObjectURL生成的是当前页面专属的临时Blob链接，只在当前页面打开的生命周期内有效，关掉页面就会失效，不能跨页面、跨站点访问。

你需要把生成的图片URL存到所有需要用到它的逻辑都能访问到的作用域里，或者在生成URL的回调里直接调用后续的处理逻辑，参考代码如下：

// 在所有业务逻辑都能访问到的上层作用域定义变量，存储生成的图片链接
let globalImageURL = null;

window.addEventListener('load', function() {
  const fileInput = document.querySelector('input[type="file"]');
  fileInput.addEventListener('change', function() {
    if (this.files && this.files[0]) {
      // 生成链接后赋值给上层作用域的变量
      globalImageURL = URL.createObjectURL(this.files[0]);
      
      // 不要写return，直接在这里触发需要用到URL的逻辑即可
      // 例1：设置图片预览
      // document.querySelector('#preview').src = globalImageURL;
      // 例2：传给自定义的处理函数
      // handleImageUpload(globalImageURL);
    }
  });
});

// 其他位置使用URL时，注意要等用户完成文件选择后再取值，否则变量还是null
// 比如绑定到按钮点击事件中使用
document.querySelector('#submitBtn')?.addEventListener('click', () => {
  if (!globalImageURL) {
    alert('请先选择要上传的图片');
    return;
  }
  // 在这里写你需要用到图片URL的业务逻辑
  console.log('获取到的图片链接：', globalImageURL);
})

• 普通DOM事件（click/change/input等）的回调返回值默认不会被浏览器接收，不要靠return从事件回调里向外传值。
• 用let/const声明的变量有块级作用域限制，在哪个{}代码块内声明，就只能在哪个块及其子块内访问，跨块访问需要把变量声明到共同的上层作用域。
• Blob URL用完之后记得调用URL.revokeObjectURL(globalImageURL)手动释放内存，避免不必要的内存占用。

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