React中file类型input的accept属性不生效 如何仅允许xlsx/xls文件上传

accept="xlsx/*"属于无效配置：accept属性的通配符*仅支持对标准MIME类型的子类型做匹配（例如image/*可匹配所有图片格式），xlsx并非注册过的合法MIME主类型，浏览器无法识别该过滤规则，因此文件选择窗会展示所有格式的文件。

1. 修正input的accept属性 #

不要使用自定义的伪MIME写法，同时配置Excel文件对应的标准MIME类型+文件后缀，兼容不同浏览器的识别逻辑，覆盖.xls和.xlsx两种格式：

<div>
  <form onSubmit={handleSubmit}>
    <input 
      type="file" 
      accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      required  
      onChange={handleChange}
    />
    <button type="submit" className='submitbutton'>Import Bulk User</button>
  </form>
</div>

该配置仅能让文件选择弹窗默认筛选展示Excel格式文件，弹窗底部仍保留「所有文件」选项，用户可手动切换选择非Excel文件，因此不能仅依赖accept属性做限制。

2. 增加前端运行时校验 #

在onChange回调和表单提交逻辑中，对选中的文件做二次拦截，避免用户选到非法格式文件：

const handleChange = (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 校验文件后缀
  const fileExtension = selectedFile.name.split('.').pop().toLowerCase();
  const allowedExtensions = ['xls', 'xlsx'];
  // 校验文件MIME类型，避免用户手动修改文件后缀绕过校验
  const allowedMimeTypes = [
    'application/vnd.ms-excel',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  ];

  if (!allowedExtensions.includes(fileExtension) || !allowedMimeTypes.includes(selectedFile.type)) {
    alert('仅支持上传.xls、.xlsx格式的Excel文件');
    e.target.value = ''; // 清空非法选中项
    return;
  }

  // 合法文件的后续处理逻辑
};

3. 必须配置服务端校验 #

所有前端校验都属于软限制，恶意用户可直接绕过前端逻辑上传非法文件，必须在服务端对上传文件的后缀、MIME值、文件头特征做完整校验，从根源上拦截不符合要求的文件，避免安全风险。

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