React Dropzone设置accept="image/jpeg"阻塞onDrop函数如何解决

你设置accept="image/jpeg"后校验逻辑失效的核心原因是：react-dropzone会在组件内部先做一层格式过滤，不符合accept规则的文件不会进入onDrop回调的acceptedFiles数组，而是被归类到第二个参数fileRejections中。你之前的校验逻辑只遍历了acceptedFiles，自然拿不到用户选错的非JPEG文件，也就触发不了错误提示。

同时满足「文件选择弹窗默认筛选JPEG」「选错格式弹出错误提示」两个需求，只需要按以下步骤修改：

• 保留Dropzone组件上的accept属性，这个属性就是用来控制系统文件弹窗默认展示的文件类型的，不需要移除
• 把原有写在acceptedFiles遍历里的格式校验逻辑，迁移到对fileRejections参数的判断中
• 修正原有代码的拼写错误：将格式名的错写JPED改为JPEG，alert文案里的错写Onlu改为Only

Hook 版本（react-dropzone 推荐用法） #

import { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

const ALLOWED_FORMAT = 'image/jpeg';

export default function JpegDropzone() {
  const onDrop = useCallback((acceptedFiles, fileRejections) => {
    // 先校验不符合规则的文件
    const hasInvalidFormat = fileRejections.some(rejection => 
      rejection.errors.some(err => err.code === 'file-invalid-type')
    );
    if (hasInvalidFormat) {
      alert("Only JPEG files accepted");
      return; // 终止后续上传逻辑
    }

    // 处理合法的JPEG文件，写入你原有的上传逻辑
    acceptedFiles.forEach(file => {
      console.log('处理合法文件：', file.name);
    });
  }, []);

  const { getRootProps, getInputProps } = useDropzone({
    accept: ALLOWED_FORMAT, // 保留该配置控制文件弹窗筛选
    onDrop
  });

  // 如果你用的是v14及以上新版本，accept配置需要改成对象格式适配新规范：
  // accept: {
  //   'image/jpeg': ['.jpg', '.jpeg']
  // }

  return (
    <div {...getRootProps({ className: 'dropzone' })}>
      <input {...getInputProps()} />
      <p>点击或拖拽JPEG格式文件到此处上传</p>
    </div>
  );
}

组件版本（直接使用<Dropzone>组件） #

逻辑和hook版本完全一致，只需要在onDrop回调里处理两个参数即可：

import { Dropzone } from 'react-dropzone';

const ALLOWED_FORMAT = 'image/jpeg';

export default function JpegDropzoneComponent() {
  return (
    <Dropzone
      accept={ALLOWED_FORMAT}
      onDrop={(acceptedFiles, fileRejections) => {
        const hasInvalidFormat = fileRejections.some(rejection => 
          rejection.errors.some(err => err.code === 'file-invalid-type')
        );
        if (hasInvalidFormat) {
          alert("Only JPEG files accepted");
          return;
        }
        // 正常处理合法JPEG文件
        acceptedFiles.forEach(file => {
          // 写入你的原有上传逻辑
        })
      }}
    >
      {({getRootProps, getInputProps}) => (
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          <p>点击或拖拽JPEG格式文件到此处上传</p>
        </div>
      )}
    </Dropzone>
  )
}

补充说明：如果用户绕过文件选择弹窗的筛选（比如手动切换弹窗里的文件类型为「所有文件」后选png、pdf），组件依然会把这些不符合规则的文件放进fileRejections里，错误提示可以正常触发，不会漏判。

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