如何在React & Typescript中实现图片上传的文件大小校验逻辑

一、现有校验逻辑的正确性分析 #

• 单位换算部分：你写的1024 * 1024 * 10对应的是10MiB（二进制单位的兆字节），如果你们业务规则里的10MB是按操作系统常用的二进制换算标准，这个计算是正确的。如果是按存储厂商常用的十进制标准，10MB对应的是10 * 1000 * 1000，可以根据实际业务需求调整。
• 逻辑缺失点：你当前的代码没有校验上传文件的数量，需求要求最多上传2张，需要补充e.target.files.length > 2的判断，否则用户选3张就算总大小没超也会不符合要求。
• 大小比较逻辑本身是对的，File对象的size属性返回的是字节数，累加后和你定义的总上限字节数比较没问题。

二、关于e.target.size的使用可行性 #

• 这种方式完全不可行。e.target指向的是你绑定事件的<input type="file">DOM元素，它的size属性是用来控制输入框在页面上的显示宽度的，和文件大小没有任何关系，绝对不能用来做文件大小判断。你只能遍历e.target.files数组里的每个File对象，获取每个文件的size属性累加得到总大小。

三、修正后的完整校验代码参考 #

const onFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
  // 10MB 二进制换算，如需十进制改为 10 * 1000 * 1000
  const MAX_TOTAL_SIZE = 1024 * 1024 * 10;
  const MAX_FILE_COUNT = 2;
  let totalSize = 0;

  if (!e.target.files?.length) return;

  // 先校验数量
  if (e.target.files.length > MAX_FILE_COUNT) {
    setHasModal(true); // 对应模态框提示：最多上传2张图片
    e.target.value = '';
    return;
  }

  // 再校验总大小
  for (let i = 0; i < e.target.files.length; i++) {
    totalSize += e.target.files[i].size;
  }
  if (totalSize > MAX_TOTAL_SIZE) {
    setHasModal(true); // 对应模态框提示：两张图片总大小不能超过10MB
    e.target.value = '';
    return;
  }

  // 校验通过后执行后续上传逻辑
}

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