js文件上传精准校验文件类型，防止直接.mp4改成.mp3上传

一个完成音乐上传的需求，按照常理都是在onChange的时候拿file的type来判断类型对不对，这样是存在很大风险的，如果用户直接修改了文件名的后缀，比如.mp4直接改成.mp3，在不支持的播放器中肯定会出现不能播放的问题。
如何能精准的判断一个文件的类型呢,通过上传文件的type肯定是不行的，我们需要读到原始文件类型的，查阅资料可知，每种类型都有自己独有的文件头，这个是不会改变的，所有可以拿到文件头来判断
封装的方法

  function getFileMimeType(file) {
        const map = {
            'FFD8FFE0': 'jpg',
            '89504E47': 'png',
            '47494638': 'gif',
            "52494646": 'webp',
            "0000001C": 'mp4',
        }

        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        return new Promise((resolve, reject) => {
            reader.onload = (event) => {
                try {
                    let array = new Uint8Array(event.target.result);
                    array = array.slice(0, 4);
                    let arr = [...array]
                    let key = arr.map(item => item.toString(16)
                        .toUpperCase()
                        .padStart(2, '0'))
                        .join('')
                    resolve(map[key])
                } catch (e) {
                    reject(e);
                }
            };
        });
    }

可以看到 getFileMimeType 方法中有个map数组，key就是对应格式的文件头编码，如果还想知道其他的类型的文件头编码可以在网上查一下，也可以自己打断点上传要判断的类型,断点看key,拿到key在map增加即可。
使用getFileMimeType

    $("#file-input").bind("change", function () {
      let files = this.files;
      let file = this.files[0];
        if (file) {
           getFileMimeType(file).then(res => {
            if (res == 'mp4') {
                    return alert('文件格式不正确,不支持直接修改文件后缀名上传');
                } else {
                //处理正常上传逻辑
                }
             });

        }
      })

到现在已经完成了我的需求，如有错误欢迎指正