如何严格判断文件上传类型？再不会你就out啦！

文件上传是工作中常见的业务需求，很多情况下，我们需要限制文件的上传类型，比如只能上传图片。通常我们是通过input元素的accept属性来限制文件的类型：

<input id="file" type="file" accept="image/*" />

或者通过截取文件名后缀的方式来判断：

const ext = file.name.slice(file.name.lastIndexOf('.') + 1);

这样做看似没有毛病，但如果把其他文件的后缀名改为图片格式，就可以成功突破这个限制。以上两种方式都不严谨，存在一定的安全隐患。那么应该如何解决这个问题呢？

一、查看文件的头信息

所有文件在计算机中都是以二进制形式进行存储的，但二进制数据是不方便做判断的，我们可以利用 vscode 插件hexdump for VSCode以十六进制的形式查看二进制文件。安装完成后，点击右上角的小图标，即可查看文件的十六进制信息：

那么，我们分别查看一下jpg png gif的十六进制头信息：

多打开几个文件试试，你会发现同一种类型的文件，他们的头信息是完全相同的。接下来，我们就可以根据头信息来判断文件类型了。

二、根据头信息判断文件类型

1. 将文件转为十六进制字符串

在获取文件对象后，我们可以通过FileReader API来读取文件的内容，然后将结果转为Unicode编码，再转为十六进制，以下是我封装的将文件转为十六进制字符串的方法：

async blobToString(blob) {
   
  return new Promise(resolve => {
   
    const reader = new FileReader()
    reader.onload = function() {
   
      const res = reader.result
        .split("") // 将读取结果分割为数组
        .map(v => v.charCodeAt()) // 转为 Unicode 编码
        .map(v => v.toString(16).toUpperCase()