iPhone 认为 e.target.files 中的所有视频都是 image/jpeg。其他平台都没问题

Question

在我的 React 应用程序中，我遇到了一个错误，iPhone 上的用户尝试将视频上传到平台失败。

在我的 Windows 桌面、Android 设备和家庭 iPad 上没有问题，因此我尝试进行一些故障排除。

这是我的输入元素的“handleMedia”函数以及供参考的输入元素：

<input
              hidden
              multiple
              accept="video/mp4,video/avi,video/quicktime,video/x-ms-wmv,image/*"
              style={{ display: "none" }}
              id="raised-button-file"
              type="file"
              onChange={handleMedia}
            />

和

  const handleMedia = (e) => {
    const files = e.target.files;
  
    const allowedVideoExtensions = ["mp4", "avi", "mov", "wmv"];
  
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const fileExtension = file.name.split('.').pop().toLowerCase();
  
      const isVideo = allowedVideoExtensions.includes(fileExtension);
      const isImage = !isVideo; // Consider it an image if it's not a video
        
      // console.log("File Name:", file.name, "Extension:", fileExtension, "Is Video:", allowedVideoExtensions.includes(fileExtension));
      alert(`File Name: ${file.name}, Extension: ${fileExtension}, Is Video: ${isVideo}, fileType: ${file.type}, fileSize: ${file.size / 1024 / 1024}`);
  
      if (isImage && file.size > 20 * 1024 * 1024) { // 20 MB
        alert("One or more of your images exceed the 20MB size limit. Please select smaller files.");
        return;
      } else if (isVideo && file.size > 200 * 1024 * 1024) { // 200 MB
        alert("One or more of your videos exceed the 200MB size limit. Please select smaller files.");
        return;
      }
    }
  
    setMedia(Array.from(e.target.files));
  };

所以这些值都是您在其他平台上所期望的，但在 iPhone 上，我选择了我知道扩展名的文件，我知道这些文件是视频，并且我得到了一个以 .jpeg 结尾的 file.name，而不是它应该是的（例如 mp4 或 mov）、image/jpeg 的文件类型以及与电影文件匹配的文件大小。

这到底是怎么回事？

Answer 1

上传的视频似乎不是您期望的格式。
您的代码指出，如果文件不是

allowedVideoExtensions

之一，那么它必须 是图像。

  // these can be defined at the top of the file and not in the function
  const allowedVideoExtensions = ["mp4", "avi", "mov", "wmv"];
  const allowedImageExtensions = [ ... ]


  const handleMedia = (e) => {
    const files = e.target.files;
 
  
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const fileExtension = file.name.split('.').pop().toLowerCase();
  
      const isVideo = allowedVideoExtensions.includes(fileExtension);
      const isImage = !isVideo && allowedImageExtensions.includes(fileExtension); // Consider it an image if it's not a video
        
      // console.log("File Name:", file.name, "Extension:", fileExtension, "Is Video:", allowedVideoExtensions.includes(fileExtension));
      alert(`File Name: ${file.name}, Extension: ${fileExtension}, Is Video: ${isVideo}, fileType: ${file.type}, fileSize: ${file.size / 1024 / 1024}`);
  
      if (isImage && file.size > 20 * 1024 * 1024) { // 20 MB
        alert("One or more of your images exceed the 20MB size limit. Please select smaller files.");
        return;
      } else if (isVideo && file.size > 200 * 1024 * 1024) { // 200 MB
        alert("One or more of your videos exceed the 200MB size limit. Please select smaller files.");
        return;
      }
    }
  
    setMedia(Array.from(e.target.files));
  };

根据数据中可用的内容，可以（在循环内）执行以下操作：

      const file = files[i];
      const fileType = file.type; // this will give you the MIME-type

  
      const isVideo = fileType.includes("video/");
      const isImage = fileType.includes("image/"); 

这样您应该能够访问 文件 MIME 类型，然后您可以查看它是否包含

"image/"

或

"video/"

，这将减少开销并释放扩展检查