input[type=file]选择docx文件时type为空、MIME类型识别异常如何解决

浏览器获取File对象的type属性依赖本地操作系统的后缀名与MIME类型映射配置，若系统未给.docx后缀注册对应MIME类型，就会返回空字符串，上传时浏览器无法识别就会默认设为application/octet-stream。

1. 前端手动根据文件后缀修正MIME类型 #

原生File对象的type属性为只读，你可以在获取文件后判断后缀名，生成新的带正确MIME类型的File对象用于后续上传，代码示例：

// 预先定义后缀对应的MIME映射，可按需扩展其他办公文档类型
const mimeMap = {
  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  doc: 'application/msword',
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
}

function logFile(e) {
  const myFile = document.getElementById("myfile");
  const originFile = myFile.files[0];
  if (!originFile) return;
  // 提取文件后缀
  const fileExt = originFile.name.split('.').pop().toLowerCase();
  let finalFile = originFile;
  // 当type为空且存在对应映射时，生成新的File对象
  if (!originFile.type && mimeMap[fileExt]) {
    finalFile = new File([originFile], originFile.name, {
      type: mimeMap[fileExt],
      lastModified: originFile.lastModified
    });
  }
  // 后续上传使用finalFile即可
  console.table(finalFile);
}

2. FormData上传时直接指定类型 #

如果使用FormData封装上传请求，可以在append文件时直接指定对应参数，不需要额外生成新File对象：

const formData = new FormData();
// 第三个参数指定文件名，浏览器会自动匹配新File对象设置的正确MIME类型
formData.append('upload_file', finalFile, finalFile.name);
// 直接提交formData即可，请求头会携带正确的文件Content-Type

3. 后端兼容改造 #

如果前端改造范围较大，可以在后端新增兼容逻辑：当收到的文件MIME类型为application/octet-stream时，读取文件后缀名手动映射为正确的MIME类型后再做业务校验，无需前端改动。

• 提示：如果业务有严格的文件格式校验要求，建议后端额外校验文件二进制头信息，避免恶意修改后缀名的文件绕过校验。

内容的提问来源于stack exchange，提问作者Tuấn Lê