react-file-drop如何实现拖拽上传文件类型过滤

react-file-drop 组件本身没有内置文件格式过滤的配置项，所有格式校验逻辑直接在 onDrop 回调中实现即可，这是稳定性最高的扩展方式。

具体实现步骤 #

• 先定义允许上传的文件格式白名单，统一处理为小写格式，避免用户上传大写后缀（如.CSV/.JPEG）时漏判
• 编写单文件校验逻辑，可按需选择后缀校验、MIME类型校验，或双校验结合提升严谨性
• 在onDrop回调中遍历拖拽得到的文件列表，分离合法/非法文件，非法文件直接拦截，合法文件走后续业务流程
• 可选：针对非法文件给用户明确的格式提示，优化交互体验

完整代码示例 #

import React from 'react';
import { FileDrop } from 'react-file-drop';
import './Demo.css';

// 允许的文件后缀白名单
const ALLOWED_EXTENSIONS = ['.csv', '.jpeg', '.jpg'];
// 如需更严谨校验可补充MIME白名单
const ALLOWED_MIME_TYPES = ['text/csv', 'image/jpeg'];

/**
 * 校验单个文件是否符合格式要求
 * @param {File} file 拖拽拿到的文件对象
 * @returns {boolean} 是否允许上传
 */
const checkFileValid = (file) => {
  const lowerFileName = file.name.toLowerCase();
  const hasValidExt = ALLOWED_EXTENSIONS.some(ext => lowerFileName.endsWith(ext));
  // 若不需要MIME校验，直接返回hasValidExt即可
  const hasValidMime = ALLOWED_MIME_TYPES.includes(file.type);
  return hasValidExt && hasValidMime;
};

export const Demo = () => {
  const styles = { border: '1px solid black', width: 600, color: 'black', padding: 20 };
  
  const handleDrop = (files, event) => {
    if (!files?.length) return;
    const fileList = Array.from(files);
    // 过滤合法、非法文件
    const validFiles = fileList.filter(checkFileValid);
    const invalidFiles = fileList.filter(file => !checkFileValid(file));

    // 非法文件提示逻辑，可替换为项目内的全局提示组件
    if (invalidFiles.length > 0) {
      alert(`已拦截${invalidFiles.length}个不符合格式的文件，仅支持.csv、.jpeg格式文件上传`);
    }

    // 合法文件走后续处理逻辑：上传、预览等
    if (validFiles.length > 0) {
      console.log('待处理合法文件：', validFiles);
      // 这里写你的业务逻辑
    }
  };

  return (
    <div>
      <h1>React File Drop demo</h1>
      <div style={styles}>
        <FileDrop
          onFrameDragEnter={(event) => console.log('onFrameDragEnter', event)}
          onFrameDragLeave={(event) => console.log('onFrameDragLeave', event)}
          onFrameDrop={(event) => console.log('onFrameDrop', event)}
          onDragOver={(event) => console.log('onDragOver', event)}
          onDragLeave={(event) => console.log('onDragLeave', event)}
          onDrop={handleDrop}
        >
          Drop some files here!
        </FileDrop>
      </div>
    </div>
  );
};

注意事项 #

• 不要在onDragOver/onDragEnter阶段尝试做文件格式校验：这两个事件触发时无法拿到完整的文件名称、类型信息，校验结果不可靠，所有过滤逻辑必须放在onDrop回调中执行
• 如果只做后缀校验，建议兼容常见的同格式后缀，比如jpeg格式通常会有.jpg后缀，避免误拦截正常文件
• MIME类型校验在部分操作系统、特殊文件场景下可能识别不准，建议优先以后缀校验为主，MIME校验作为辅助规则

内容的提问来源于stack exchange，提问作者Kubaghetto the fresh Testobun