如何在material-ui dropzone文件验证不通过时拒绝上传

你可以通过两种方式实现无效文件的自动拒绝：

方式1：使用组件内置校验规则（推荐） #

material-ui-dropzone 底层基于 react-dropzone 封装，自带通用校验属性，命中规则的文件会被自动拦截，不会进入有效文件列表：

• 限制允许的文件类型：配置 accept 属性，传入允许的MIME类型数组或键值对，示例：accept={['image/jpeg', 'image/png', 'application/pdf']}
• 限制单文件大小：配置 maxFileSize 属性，单位为字节，比如限制最大10M可写为 maxFileSize={10 * 1024 * 1024}
• 限制上传文件总数：配置 filesLimit 属性，超出数量的新增文件会被直接拒绝

方式2：在handleUpload中自定义校验拦截 #

onDrop 触发时默认会传入三个参数：(acceptedFiles, rejectedFiles, event)，你可以在handleUpload中对文件做自定义规则校验，不符合要求的文件直接过滤丢弃即可实现拒绝效果：

const handleUpload = (acceptedFiles, rejectedFiles) => {
  // 自定义校验示例：仅保留文件名不含特殊字符的文件
  const validFiles = acceptedFiles.filter(file => {
    const invalidCharReg = /[<>:"/\\|?*]/g
    return !invalidCharReg.test(file.name)
  })

  // 无效文件直接丢弃，仅将validFiles传给后续上传逻辑即可
  if (validFiles.length < acceptedFiles.length) {
    // 此处可补充错误提示逻辑，告知用户已拦截无效文件
    console.log(`已拦截${acceptedFiles.length - validFiles.length}个不符合要求的文件`)
  }

  // 后续上传逻辑仅使用validFiles
  // uploadFiles(validFiles)
}

如果需要给用户展示被拒绝的原因，可以读取rejectedFiles中每个文件的errors字段，内置规则的错误会携带对应的错误码，比如file-too-large代表文件过大、file-invalid-type代表文件类型不匹配。
如果需要让无效文件不展示在dropzone的已选列表中，可自行维护文件列表状态：

import { useState } from 'react'
import { DropzoneArea } from 'material-ui-dropzone'

const Uploader = () => {
  const [fileList, setFileList] = useState([])

  const handleUpload = (acceptedFiles) => {
    // 自定义校验逻辑
    const validFiles = acceptedFiles.filter(file => file.size < 5 * 1024 * 1024)
    // 仅将有效文件加入状态，同步到dropzone的展示列表
    setFileList(prev => [...prev, ...validFiles])
  }

  return (
    <DropzoneArea
      files={fileList}
      onDrop={handleUpload}
      // 其他属性配置
    />
  )
}

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