精确判断文件类型:
前言:
一般上传的文件都要做类型过滤,但是如果手动修改后缀名,就不精准了
比如把一个word文档由.doc改为 .png
将上传文件转为二进制形式后,再获取其前四位头文件的十六进制编码,根据这个就可以精准判定上传文件类型。对于不符合上传格式要求的,直接在客户端做处理。
用法:
import { BinaryByte } from '@/model/common';
function getFileMimeType(file) {
const map = BinaryByte;
const reader = new FileReader(); // 异步按字节读取文件内容,结果用ArrayBuffer对象表示
reader.readAsArrayBuffer(file); // ArrarBuffer代表原始的二进制数据
return new Promise((resolve, reject) => {
reader.onload = (event) => {
try {
let array = new Uint8Array(event.target.result);
array = array.slice(0, 4);
let arr = [...array]
// 不同场景将key加入 BinaryByte 中
let key = arr.map(item => item.toString(16)
.toUpperCase()
.padStart(2, '0'))
.join('')
resolve(map[key])
} catch (e) {
reject(e);
}
};
});
}
export const BinaryByte = {
"38425053": "psd", // Adobe Photoshop
"41433130": "cad", // dwg
"41564920": "avi", // AVI
"47494638": "gif", // GIF
"52617221": "rar", // RAR Archive
"57415645": "wave", // Wave
"FFD8FF": "jpeg", // JPEG
"FFD8FFE1": "jpeg", // JPEG
"FFD8FFDB": "jpg", // JPG
"89504E47": "png", // PNG
"49492A00": "tiff", // TIFF
"424D": "bmp", // Windows Bitmap
"7B5C727466": "rtf", // Rich Text Format
"3C3F786D6C": "xml", // XML
"68746D6C3E": "html", // HTML
"44656C69766572792D646174653A": "eml", // Email [thorough only]
"CFAD12FEC5FD746F": "dbx", // Outlook Express
"2142444E": "outlook", // (pst)
"D0CF11E0": "xlsordoc", // MS Word/Excel .xls .doc
"5374616E64617264204A": "mdb", // MS Access
"FF575043": "wordperfect", // (wpd)
"252150532D41646F6265": "postscript", //(eps.or.ps)
"255044462D312E": "pdf", // Adobe Acrobat
"AC9EBD8F": "quicken", // qdf
"25504446": "qdf", // qdf
"E3828596": "pwl", // Windows Password
"504B0304": "zip", // ZIP Archive ps: docx/xlsx 也为 zip
"2E7261FD": "ram", // Real Audio
"2E524D46": "rm", // Real Media
"000001B3": "mpeg", // MPEG
"6D6F6F76": "mpeg1", // MPEG1
"6D6F6F76": "quicktime", // (mov)
"3026B2758E66CF11": "asf", // Windows Media
"4D546864": "midi", // mid
"3D22C3C5": "csv"
};
// 精确 判断文件 类型
const preciseJudge = async (file: any) => {
const nameList = ['png', 'jpeg', 'jpg'];// 不同场景再换需求的类型
const isJudge = [] as string[]; // 返回的是上传文件的类型
// 精确的文件类型
for (let i = 0; i < file.length; i++) {
await getFileMimeType(file[i])
.then(res => {
isJudge.push(res + '');
})
.catch(() => isJudge.push(''));
}
const is = isJudge.every(item => nameList.includes(item));
return is;
};
// 获取 一下 上传文件的所有二进制
const binaryName = await preciseJudge(file);
if (!binaryName) {
mapData.spinning = false;
ElMessage.error('上传图片只能是 JPG/JPEG/PNG 格式!');
return;
}