Chrome浏览器input的accept属性限制doc、docx文件失效问题求助

• Chrome 83及后续版本调整了<input type="file">的accept属性匹配逻辑，仅填写MIME类型时，浏览器会优先匹配设备系统中注册的文件MIME标识，部分Windows/macOS设备上未正确注册.docx对应的application/vnd.openxmlformats-officedocument.wordprocessingml.document MIME类型，就会导致过滤限制失效
• 旧版Chrome的匹配逻辑是直接校验文件后缀和MIME的预设对应关系，不依赖系统注册值，所以早前版本可以正常生效；Firefox目前仍沿用旧的匹配逻辑，所以不受影响

• 方案1：在accept属性中同时补充对应的文件后缀名，兼容两种匹配逻辑，修改后的代码如下：

<input type="file" multiple="multiple" accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.doc,.docx" />

该方案兼容性最好，所有主流浏览器都支持，同时覆盖了依赖MIME和依赖后缀的两种匹配逻辑，无需额外编写JS代码。

• 方案2：前端新增提交前的文件后缀校验作为兜底，避免用户绕过过滤规则上传不符合要求的文件，示例校验代码如下：

function isValidWordFile(file) {
  const allowedSuffix = ['doc', 'docx']
  const fileSuffix = file.name.split('.').pop().toLowerCase()
  return allowedSuffix.includes(fileSuffix)
}
// 在文件选择回调、表单提交触发时调用上述方法校验即可

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