设置input的accept为.zip仍允许pptx等文件，如何限制仅上传zip？

你遇到的问题本质是因为docx、pptx、xlsx等Office Open XML格式本质是ZIP压缩包，部分浏览器仅通过.zip后缀过滤时会误将这类文件识别为合法ZIP格式，可按以下层级逐步限制：

1. 优化input标签的accept属性 #

除了指定后缀，同时补充ZIP对应的标准MIME类型，提升浏览器端过滤的准确率：

<input type="file" title="" onChange={handleUpload} accept=".zip, application/zip, application/x-zip-compressed" />

2. 添加上传前的前端本地强制校验 #

accept属性仅为浏览器提供过滤建议，用户可手动切换文件选择器的「所有文件」选项绕过，也可以修改文件后缀伪装成ZIP格式，必须在上传逻辑中增加校验，参考handleUpload实现：

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

  // 校验文件后缀
  const fileSuffix = file.name.split('.').pop().toLowerCase();
  if (fileSuffix !== 'zip') {
    alert('仅支持上传ZIP格式文件');
    // 清空input值，否则下次选择同一个文件不会触发onChange
    e.target.value = '';
    return;
  }

  // 可选：更严谨的二进制文件头校验，防止用户修改后缀伪装ZIP
  const reader = new FileReader();
  reader.onloadend = (evt) => {
    // ZIP文件的前两个字节固定为 0x50 0x4B
    const arr = new Uint8Array(evt.target.result);
    if (arr[0] !== 0x50 || arr[1] !== 0x4B) {
      alert('文件格式非法，请上传有效的ZIP文件');
      e.target.value = '';
      return;
    }
    // 校验通过，执行后续上传逻辑
  };
  // 只读取文件前2个字节即可，性能开销极低
  reader.readAsArrayBuffer(file.slice(0, 2));
}

3. 后端增加格式校验 #

前端所有校验逻辑都可被人为绕过，后端必须作为最后一道防线，对上传的文件做后缀、文件头双重校验，避免非法文件上传。

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