iOS iPhone浏览器无法通过上传对话框接收视频文件问题排查

问题背景 #

我们用React开发的服务通过iOS文件上传对话框处理视频文件，该功能在Android、Linux及macOS的所有浏览器中均正常运行，但在iPhone（如iPhone 14 Pro Max）的浏览器中出现异常：选择视频文件后系统会启动压缩流程，随后上传对话框直接拒绝该文件。经BrowserStack真机模拟器调试，发现选择文件时系统会先执行压缩并将文件名改为临时名称（与原文件名不同），最终导致上传失败。

上传代码 #

export const UploadVideo = async (file, signedurl, uploading) =>
{
  let resultState = { state: '', data: {} };

  if (SERVER_STATUS !== 'localhost')
  {
    await axios({
      method: 'put',
      url: signedurl,
      data: file,
      headers: { 'Content-Type': 'application/octet-stream', },
      onUploadProgress: uploading
    }).then(function (response)
    {
      resultState.state = 'success';
    }).catch(function (error)
    {
      resultState.state = 'error';
      resultState.data.message = error.message;
      window.toastr.error(error.message);
    })
  } else resultState.state = 'success';

  return resultState;
}

可能原因 #

• iOS Safari的视频压缩机制生成的临时文件，其元信息（如文件名、MIME类型）与原文件存在差异，可能不符合后端签名URL的校验规则
• 请求头硬编码为application/octet-stream，与压缩后视频的实际MIME类型不匹配，导致上传验证失败
• iOS压缩视频后，文件流的读取权限或处理逻辑存在异常，导致Axios无法正确发送文件数据

解决方案尝试 #

1. 修复文件元信息 #

在文件选择阶段，手动保留原文件的名称和MIME类型，避免压缩后的临时信息干扰：

const handleFileSelect = (e) => {
  const selectedFile = e.target.files[0];
  // 重新构造File对象，确保文件名和类型与原文件一致
  const fixedFile = new File([selectedFile], selectedFile.name, {
    type: selectedFile.type || 'video/mp4'
  });
  // 传入UploadVideo函数使用fixedFile
};

2. 动态设置Content-Type #

替换硬编码的请求头，使用文件自身的MIME类型：

await axios({
  method: 'put',
  url: signedurl,
  data: file,
  headers: { 'Content-Type': file.type || 'video/mp4' },
  onUploadProgress: uploading
})

3. 尝试绕过iOS自动压缩 #

在文件输入标签中添加特定属性，减少系统自动压缩的触发概率：

<input 
  type="file" 
  accept="video/mp4" 
  capture="environment" 
  onChange={handleFileSelect}
/>

• accept="video/mp4" 指定仅接受MP4格式，避免系统对其他格式的视频进行强制压缩
• capture="environment" 调用相机直接拍摄视频（如果业务允许），跳过本地文件的压缩流程

4. 检查后端签名URL逻辑 #

后端签名URL可能对文件名、Content-Type有严格校验，iOS压缩后的临时文件名与签名时的原文件名不一致会导致验证失败。需后端调整校验规则，或在上传前确保文件名与签名请求时的名称一致。

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