判断文件类型

您选择的文件类型为：

后缀判断

通过文件后缀进行判断

const { name, type } = file
// 根据文件名判断，如一个png文件如下
/*
      {
        lastModified: 1589020817347
        lastModifiedDate: Sat May 09 2020 18:40:17 GMT+0800 (中国标准时间) {}
        name: "1.png"
        size: 77356
        type: "image/png"
        webkitRelativePath: ""
      }
*/
let type = name.slice(name.lastIndexOf('.') + 1)
// type   结果为 png

缺点

这种方案存在一定的缺陷

如果用户通过修改后缀名，则对应的 type，name 均具有一定的不正确可能性

所以更加严谨的判断方式，应该为通过读取文件二进制码，读取头信息进行判断，这个用户是无法进行修改的

读取文件头信息

详细代码

const FILE_HEADER = [
  { type: "jpg", head: "FFD8FF" },//  JPEG (jpg)
  { type: "png", head: "89504E47" },//PNG (png)
  { type: "gif", head: "47494638" },//GIF (gif)
  { type: "tif", head: "49492A00" },//TIFF (tif)
  { type: "bmp", head: "424D" },//Windows Bitmap (bmp)
  { type: "dwg", head: "41433130" },//CAD (dwg)
  { type: "psd", head: "38425053" },//Adobe Photoshop (psd)
  { type: "rtf", head: "7B5C727466" },//Rich Text Format (rtf)
  { type: "xml", head: "3C3F786D6C" },//XML (xml)
  { type: "html", head: "68746D6C3E" },//HTML (html)
  { type: "eml", head: "44656C69766572792D646174653A" },//Email [thorough only] (eml)
  { type: "dbx", head: "CFAD12FEC5FD746F" },//Outlook Express (dbx)
  { type: "pst", head: "2142444E" },//Outlook (pst)
  { type: "doc/xls", head: "D0CF11E0" },//MS Word/Excel (xls.or.doc)
  { type: "mdb", head: "5374616E64617264204A" },//MS Access (mdb)
  { type: "wpd", head: "FF575043" },//WordPerfect (wpd)
  { type: "eps/ps", head: "252150532D41646F6265" },//Postscript (eps.or.ps)
  { type: "pdf", head: "255044462D312E" },//Adobe Acrobat (pdf)
  { type: "qdf", head: "AC9EBD8F" },//Quicken (qdf)
  { type: "pwl", head: "E3828596" },//Windows Password (pwl)
  { type: "zip", head: "504B0304" },//ZIP Archive (zip)
  { type: "rar", head: "52617221" },//RAR Archive (rar)
  { type: "wav", head: "57415645" },//Wave (wav)
  { type: "avi", head: "41564920" },//AVI (avi)
  { type: "ram", head: "2E7261FD" },//Real Audio (ram)
  { type: "rm", head: "2E524D46" },//Real Media (rm)
  { type: "mpg", head: "000001BA" },//MPEG (mpg)
  { type: "mpg", head: "000001B3" },//MPEG (mpg)
  { type: "mov", head: "6D6F6F76" },//Quicktime (mov)
  { type: "asf", head: "3026B2758E66CF11" },//Windows Media (asf)
  { type: "mid", head: "4D546864" },//MIDI (mid)
]

// 传入的是input：type=file 的事件对象e
export async function getFileType(inputEvent) {
  // 取出文件
  const file = inputEvent.target.files[0]
  console.log(file)
  // 新建一个 FileReader 用于读取文件流
  const fReader = new FileReader()
  // 根据上面的配置，读取二进制中的几个字节，然后判断类型
  for (const { type, head } of FILE_HEADER) {
    let r = await getType(fReader, file, head)
    if (r.slice(0, head.length) === head) return type
  }
  return 'unkown'
}
async function getType(fReader, file, head) {
  return new Promise(resolve => {
    fReader.readAsBinaryString(file.slice(0, head.length - 1), 'utf-8')
    fReader.onload = function () {
      let result = fReader.result
      result = [...result].map(s => s.charCodeAt(0).toString(16).toUpperCase()).join('')
      resolve(result)
    }
  })
}