Ant Design Upload组件校验视频时video/*通配符不生效如何解决

file.type === 'video/*' 写法失效是因为全等运算符===做精确字符串匹配，而浏览器返回的file.type是具体的MIME值，比如video/mp4、video/webm、video/quicktime（对应mov格式），不会返回video/*这个通配字符串，自然无法匹配到任何视频文件。

• 修正MIME类型判断逻辑：用startsWith()判断文件MIME类型是否以video/开头，即可覆盖所有标准视频MIME类型。
• 增加后缀名兜底校验：部分场景下（低版本浏览器、用户修改文件后缀、特殊编码视频）file.type可能返回空值，需要额外校验文件后缀名，避免漏判。
• 给Upload组件配置accept="video/*"属性：用户打开文件选择弹窗时会默认只展示视频文件，优化交互体验。注意该属性仅做选文件阶段的默认过滤，不能替代beforeUpload中的校验，用户仍可手动切换选择所有文件类型上传非视频内容。

import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const beforeUpload = (file) => {
  // MIME类型校验：匹配所有标准视频类型
  const isMimeVideo = file.type.startsWith('video/');
  // 后缀名校验兜底，覆盖file.type为空的异常场景
  const allowedVideoSuffix = ['mp4', 'webm', 'ogg', 'mov', 'avi', 'flv', 'mkv'];
  const fileSuffix = file.name.split('.').pop().toLowerCase();
  const isSuffixVideo = allowedVideoSuffix.includes(fileSuffix);
  const isVideo = isMimeVideo || isSuffixVideo;

  if (!isVideo) {
    message.error('仅支持上传视频文件！');
    return false;
  }

  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error('视频大小不能超过10MB！');
    return false;
  }

  return true;
};

const handleChange = (info) => {
  console.log('上传信息', info);
};

render(
  <Upload 
    beforeUpload={beforeUpload} 
    onChange={handleChange}
    accept="video/*"
  >
    <Button icon={<UploadOutlined />}>点击上传视频</Button>
  </Upload>
)

如果需要限制特定视频格式，只需修改allowedVideoSuffix中的后缀列表，同时将accept属性改为对应MIME值即可，例如仅允许mp4格式时配置accept="video/mp4"。

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