如何获取checkSize箭头函数的执行返回值？

其实你已经离正确方法很近了！在文件输入框的onChange回调里，你本身就拥有事件对象e，直接调用checkSize(e)并把返回值存起来就行，具体可以这么做：

第一步：在onChange回调中接收返回值 #

修改你的input onChange代码，在调用checkSize时直接捕获它的返回值：

<input 
  type="file" 
  id="file" 
  accept=".jpg,.jpeg,png" 
  multiple 
  onChange={(e)=> { 
    handleImageChange(e);
    // 调用checkSize并保存返回值
    const sizeCheckResult = checkSize(e);
    // 现在就能拿到true或false了
    console.log(sizeCheckResult);
  }} 
/>

注意：你的checkSize只检查了第一个文件 #

因为你的input设置了multiple（支持多选），但当前的checkSize只判断了e.target.files[0]（第一个文件）的大小，这会导致后续文件的大小不受校验。如果需要校验所有选中的文件，可以修改checkSize函数：

const checkSize = (e) => {
  const files = e.target.files;
  let allFilesValid = true;
  
  // 遍历所有选中的文件
  for (const file of files) {
    const fileSizeKB = parseInt(file.size / 1024);
    if (fileSizeKB > 240) {
      allFilesValid = false;
      break; // 只要有一个文件超标，就停止遍历
    }
  }

  // 根据结果显示/隐藏错误提示
  document.getElementById("error-file-size").style.display = allFilesValid ? "none" : "block";
  return allFilesValid;
};

进阶：根据校验结果决定是否执行后续逻辑 #

如果你希望只有当文件尺寸全部合格时，才执行handleImageChange，可以调整回调的顺序：

<input 
  type="file" 
  id="file" 
  accept=".jpg,.jpeg,png" 
  multiple 
  onChange={(e)=> { 
    const sizeCheckResult = checkSize(e);
    // 只有校验通过，才处理图片
    if (sizeCheckResult) {
      handleImageChange(e);
    }
  }} 
/>

内容的提问来源于stack exchange，提问作者Mauricio De Oliveira