Javascript FileReader的异步问题

Question

我需要在应用程序中上传后验证文件类型，除了检查扩展名外，我还包括了魔术字节检查。为此，我使用了这篇文章：

https://medium.com/the-everyday-developer/detect-file-mime-type-using-magic-numbers-and-javascript-16bc513d4e1e

以下是我的方法代码：

checkFileTypeViaMagicByte(file):boolean {
const filereader = new FileReader();
const blob = file.slice(0, 4);
filereader.readAsArrayBuffer(blob);

filereader.onloadend= (evt) => {
if (evt.target.readyState === FileReader.DONE) {
// @ts-ignore
const uint = new Uint8Array(evt.target.result);
let bytes = []
uint.forEach((byte) => {
bytes.push(byte.toString(16))
})
const hex = bytes.join('').toUpperCase();
console.log("SIGNATURE: " + hex);
switch (hex) {
case '89504E47': //image/png
return true;
case '25504446'://application/pdf
console.log("PDF case");
return true;
case 'FFD8FFDB'://image/jpeg
case 'FFD8FFE0':
return true;
default:
return false;
}
};
};
return false;
}

我遇到的问题是FileReader是异步的，我的方法总是返回false。我需要用一种方法进行验证，因为我有各种方法进行检查，如允许的文件名、文件大小等。我该如何解决这个问题？

Answer 1

您只需要承诺filereader.onloadend函数。

checkFileTypeViaMagicByte(file):boolean {
const filereader = new FileReader();
const blob = file.slice(0, 4);
filereader.readAsArrayBuffer(blob);
return new Promise((resolve, reject) => {
filereader.onloadend = (evt) => {
try {
if (evt.target.readyState === FileReader.DONE) {
// @ts-ignore
const uint = new Uint8Array(evt.target.result);
let bytes = [];
uint.forEach((byte) => {
bytes.push(byte.toString(16));
});
const hex = bytes.join("").toUpperCase();
switch (hex) {
case "89504E47": //image/png
resolve(true);
break;
case "25504446": //application/pdf
resolve(true);
break;
case "FFD8FFDB": //image/jpeg
case "FFD8FFE0":
resolve(true);
break;
default:
resolve(false);
}
}
} catch (err) {
reject(err);
}
};
});
}

此函数将返回一个需要用then解析的布尔pormise

checkFileTypeViaMagicByte(file).then(res => console.log(res))

或者使用CCD_ 4语法。

(async () => {
const result = checkFileTypeViaMagicByte(file)
console.log(result)
})()