iOS端JavaScript获取File对象文件大小与实际不符问题咨询

• iOS Safari 系统级默认行为：当从相册/文件应用选择媒体文件时，会自动对图片执行轻量压缩、格式转换（比如把HEIC转成JPEG），生成临时文件返回给JS层，所以file.size拿到的是临时压缩文件的大小，不是源文件大小
• 如果你的上传逻辑是把文件转成Base64编码后再提交请求，Base64编码会比原始二进制文件体积大约33%，这就会出现file.size低于5MB阈值，但编码后的请求体超过Vercel 5MB限制的情况
• 部分开启iCloud照片优化的设备，文件选择器返回的是本地低清缓存文件的大小，实际上传时系统会自动拉取iCloud上的原文件，导致最终上传体积远大于file.size返回值

1. 禁用iOS自动媒体优化 #

给文件选择的<input>标签添加配置关闭系统默认压缩，iOS 15+版本兼容效果较好：

<input 
  type="file" 
  accept="image/*" /* 按业务需要指定接收类型即可 */
  capture="filesystem" /* 强制从文件系统调取文件，避免相册默认压缩逻辑 */
/>

2. 基于实际提交的内容计算体积做前置校验 #

不要直接依赖file.size判断，按照你实际的上传编码逻辑计算最终请求体大小，结果和服务端接收的体积完全一致：

• 二进制FormData上传场景：

const maxSize = 5 * 1024 * 1024;
const formData = new FormData();
formData.append('file', file);
// 计算编码后FormData的实际字节大小
const formBuffer = await new Response(formData).arrayBuffer();
if (formBuffer.byteLength > maxSize) {
  // 触发文件超限提示
}

• Base64编码上传场景：

const base64Content = fileToBase64Result.split(',')[1]; // 去掉base64头部前缀
const actualSize = base64Content.length * (3 / 4); // Base64体积换算公式：4个字符对应3个原始字节
if (actualSize > 5 * 1024 * 1024) {
  // 触发文件超限提示
}

3. 缩小前端校验阈值兜底 #

考虑到低版本iOS系统兼容问题、编码体积膨胀偏差，可以把前端校验阈值下调到3.5MB左右，预留足够冗余空间，避免边缘体积的文件漏过校验：

// 按30%冗余比例下调阈值
const maxFileSize = 3.5 * 1024 * 1024;
if (file.size > maxFileSize) {
  alert('文件大小不能超过5MB');
}

以上方案均为前端层优化，服务端413响应捕获的兜底逻辑建议保留，避免极端兼容场景出现问题。

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