react-dropzone仅需接受.jpg/.jpeg，却可选中JFIF等JPG变体如何修复？

react-dropzone的accept配置仅依赖浏览器原生的文件选择器过滤，而浏览器对MIME类型和扩展名的匹配逻辑并不严格——比如JFIF文件的MIME类型通常仍被识别为image/jpeg，扩展名即使是.jfif也可能绕过前端初步过滤。要彻底解决这个问题，需要在onDrop回调中手动添加文件校验逻辑，分两种方案实现：

方案1：校验文件扩展名 #

保留原有accept配置作为用户体验优化，然后在文件接收后过滤扩展名：

1. 定义允许的扩展名列表：

const allowedExtensions = ['.gif', '.jpeg', '.pjpeg', '.png', '.bmp', '.svg+xml', '.jpg'];

2. 在onDrop中过滤文件：

const onDrop = (acceptedFiles) => {
  const validFiles = acceptedFiles.filter(file => {
    // 获取文件扩展名并转小写
    const fileExt = '.' + file.name.split('.').pop().toLowerCase();
    return allowedExtensions.includes(fileExt);
  });

  // 提示用户过滤结果
  if (validFiles.length !== acceptedFiles.length) {
    alert('仅支持.gif、.jpeg、.pjpeg、.png、.bmp、.svg+xml、.jpg格式的文件');
  }

  // 执行后续上传逻辑
  handleUpload(validFiles);
};

方案2：校验文件二进制签名（更严格） #

如果需要防止用户通过修改扩展名绕过校验，可以读取文件的二进制头（文件签名）判断真实类型，比如JFIF的签名是ff d8 ff e0或ff d8 ff e1：

1. 实现文件签名校验函数：

const validateFileSignature = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      // 读取文件前4字节的签名
      const signatureBytes = new Uint8Array(reader.result).subarray(0, 4);
      const signature = signatureBytes.reduce((str, byte) => str + byte.toString(16), '');
      
      // 允许的图片文件签名集合
      const allowedSignatures = [
        'ffd8ffe0', // JPEG/JFIF
        'ffd8ffe1', // JPEG/Exif
        '89504e47', // PNG
        '47494638', // GIF
        '424d'      // BMP
      ];
      
      resolve(allowedSignatures.includes(signature));
    };
    reader.readAsArrayBuffer(file.slice(0, 4));
  });
};

2. 在onDrop中异步校验：

const onDrop = async (acceptedFiles) => {
  const validFiles = [];
  for (const file of acceptedFiles) {
    const isValid = await validateFileSignature(file);
    if (isValid) validFiles.push(file);
  }

  if (validFiles.length !== acceptedFiles.length) {
    alert('部分文件格式不符合要求，请上传指定类型的图片');
  }

  handleUpload(validFiles);
};

注意事项 #

• 前端校验仅为用户体验优化，后端必须再做一次文件类型校验，防止恶意文件上传。
• 不要完全依赖accept配置，浏览器的过滤逻辑存在兼容性差异。

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