e.target.files[0].size与实际文件大小不符的问题排查求助

本地桌面和浏览器网络面板显示图片大小为5.1MB，但通过e.target.files[0].size获取到的字节数是5068146（约4.83MB），导致代码里5MB的大小校验未触发错误提示。相关代码如下：

<input
            style={{ display: 'none' }}
            type="file"
            onChange={async e => {
              if (e.target.files[0].size > 5 * 1024 * 1024) {
                setImageSizeError('failure')
                return
              } else {
                setImageSizeError('success')
              }
              setLoading(true)
              const updatedStep = await fileUploader(e, stepId)
              setLoading(false)
              updateStep(updatedStep)
            }}
            accept=".jpg,.jpeg,.png,.pdf"
          />

核心原因 #

系统（桌面/网络面板）显示的文件大小和JavaScript获取的size值采用了不同的单位换算标准：

• 系统通常使用十进制MB：1MB = 1000 × 1000 = 1000000字节，5.1MB换算后是5100000字节。
• 代码里用的是二进制MiB（常被误称为MB）：1MiB = 1024 × 1024 = 1048576字节，5MiB换算后是5242880字节。

因为5100000 < 5242880，所以校验条件不成立，没触发错误提示。

两种解决方式 #

1. 匹配系统显示的十进制标准：把代码中的阈值改成十进制的5MB计算方式，就能准确拦截系统显示超过5MB的文件：

<input
  style={{ display: 'none' }}
  type="file"
  onChange={async e => {
    // 限制文件大小不超过5MB（十进制，1MB=1000000字节）
    const maxFileSize = 5 * 1000 * 1000;
    if (e.target.files[0].size > maxFileSize) {
      setImageSizeError('failure')
      return
    } else {
      setImageSizeError('success')
    }
    setLoading(true)
    const updatedStep = await fileUploader(e, stepId)
    setLoading(false)
    updateStep(updatedStep)
  }}
  accept=".jpg,.jpeg,.png,.pdf"
/>

2. 保持二进制标准，调整阈值：如果需求是限制5MiB（对应系统显示约5.24MB），当前代码逻辑没问题，只需添加注释明确单位避免混淆：

<input
  style={{ display: 'none' }}
  type="file"
  onChange={async e => {
    // 限制文件大小不超过5MiB（二进制，1MiB=1048576字节，对应系统显示约5.24MB）
    const maxFileSize = 5 * 1024 * 1024;
    if (e.target.files[0].size > maxFileSize) {
      setImageSizeError('failure')
      return
    } else {
      setImageSizeError('success')
    }
    setLoading(true)
    const updatedStep = await fileUploader(e, stepId)
    setLoading(false)
    updateStep(updatedStep)
  }}
  accept=".jpg,.jpeg,.png,.pdf"
/>

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