js--精准判断上传文件类型

原创

冷月心_bytedance 2022-01-14 13:38:03 博主文章分类：js+css ©著作权

文章标签 上传文件类型解决方案 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者冷月心_bytedance的原创作品，请联系作者获取转载授权，否则将追究法律责任

js--精准判断上传文件类型

前言
解决方案
html代码
js代码
总结

前言

一般来说，对于上传的文件，都要做类型过滤，指定哪些类型能上传，哪些不能上传。

最容易想到的，也是相对常用的，是直接使用文件的拓展名。

但拓展名可以手动修改，做不到精准，比如把一个word文档由.doc改为.png

解决方案

将上传文件转为二进制形式后，再获取其前四位头文件的十六进制编码，根据这个就可以精准判定上传文件类型。对于不符合上传格式要求的，直接在客户端做处理。

html代码

这里只做演示，写的比较简单，可根据实际业务场景添加字段

<form id="form">
     <p><input type="file" name="file" multiple id='file'></p>
     <p><input type="button" value="上传" id="btn"></p>
</form>

js代码

获取dom

let form = document.getElementById('form'); 
  let btn = document.getElementById('btn'); 
  let f = document.getElementById('file');

获取文件mime类型

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

    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);
            }
        };
    });
}

上传逻辑

btn.onclick = function () {
    if (f.files.length > 1) {
        for (const file of f.files) {
            upload(file)
        }
    } else {
        upload(f.files[0])
    }
}

function upload(file) {
    getFileMimeType(file).then(res => {
        if (res) {
            let fd = new FormData(form);
            let xhr = new XMLHttpRequest();
            xhr.open("post", '/api/uploadFiles');
            xhr.send(fd);
        } else {
            alert('文件格式不符合上传要求')
            f.value = ''
            return
        }

    }).catch(err => {
        console.log(err)
    })
}