如何判断react Dropzone选中的文件是否带有扩展名

核心逻辑通过检索文件名最后一个.的位置判定扩展名是否存在，可解决你当前用split('.').pop()无法区分有无扩展名的问题。

通用判断函数 #

function hasValidExtension(filename) {
  // 异常值处理
  if (!filename || typeof filename !== 'string') return false
  const lastDotPosition = filename.lastIndexOf('.')
  // 按需选择判断逻辑：
  // 1. 类Unix隐藏文件（如.gitignore）判定为无扩展名，使用下方逻辑
  return lastDotPosition > 0
  // 2. 若需将.gitignore这类前缀带点的文件视为有扩展名，使用下方逻辑
  // return lastDotPosition !== -1
}

测试用例参考：

• hasValidExtension('file') → false
• hasValidExtension('file.png') → true
• hasValidExtension('archive.tar.gz') → true
• hasValidExtension('.gitignore') → 逻辑1返回false，逻辑2返回true

结合 react-dropzone 使用 #

方式1：选中文件后过滤 #

在onDrop回调中直接过滤不符合要求的文件：

import { useDropzone } from 'react-dropzone'

function Uploader() {
  const onDrop = (acceptedFiles) => {
    const filteredFiles = acceptedFiles.filter(file => hasValidExtension(file.name))
    // 后续处理过滤后的合法文件
  }

  const { getRootProps, getInputProps } = useDropzone({ onDrop })

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>拖拽文件到此处或点击选择</p>
    </div>
  )
}

方式2：选择阶段直接拦截 #

通过 Dropzone 内置的validator配置，在文件选中时直接拦截无扩展名的文件：

const noExtensionValidator = (file) => {
  if (!hasValidExtension(file.name)) {
    return {
      code: 'file-no-extension',
      message: '不支持上传无扩展名的文件'
    }
  }
  return null
}

// 传入useDropzone配置
const { getRootProps, getInputProps } = useDropzone({ 
  onDrop,
  validator: noExtensionValidator
})

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