Javascript 在浏览器中检测上载的图像格式是否正确

我有一个file.svg图像，并将该文件重命名为file.jpg

现在在浏览器中打开这个jpg文件肯定不会预览我的图像。因此，我试图检测通过输入表单上传的jpg图像是否真的是浏览器中的jpg

我试图以base64格式读取该文件，但找不到任何内容。有一种方法可以检测jpg图像是否被截断 这是那篇文章的参考资料

---

如何检测图像的类型是否与扩展一样正确？

在输入上添加一个事件处理程序，如下所示：

<input type="file" id="file_uploader" />

这将自动将

事件

传递给handleChange，以便您可以实际引用：

const handleChange = e => {
    const name = e.targe.file[0].name
    // name = filename.extnesion
    const extension = name.split(".")[1]
}

---

Split方法将提供一个由2个字符串组成的数组-文件名前的字符串，扩展名后的字符串。

仅通过查看文件名查找mime类型是不安全的。 您应该通过读取文件内容开头的签名字节来找到文件的确切mime类型

使用可以找到签名mime类型对

我在下面编写了一个示例代码，您可以在其中检查所选文件是否正确 是否为有效的jpeg文件。JPEG有一个简单的签名，如果文件的前2个字节是0xFF和0xD8，则可以说该文件是JPEG文件。 （请查看列表以了解更完整的签名信息）

document.querySelector（'input'）.addEventListener（'change'，function（）
{
var reader=new FileReader（）；
reader.onload=函数（）
{
var bytes=新的Uint8Array（this.result）；
如果（（字节[0]==0xFF）&&（字节[1]==0xD8））
log（“这是一个有效的jpeg文件”）；
其他的
log（“这看起来不像jpeg文件”）；
}
reader.readAsArrayBuffer（this.files[0]）；
});
正如Alper Cinar提到的，读取扩展名是不安全的，我们如何读取起始字节来识别mime类型。我想添加一个小代码段，不仅用于识别jpg的mime类型，还用于识别GIF和PNG

      const blob = files[0];
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(blob);
      fileReader.onloadend = (e) => {
        const arr = (new Uint8Array(<any>e.target.result)).subarray(0, 4);
        let header = '';
        for (let i = 0; i < arr.length; i++) {
          header += arr[i].toString(16);
        }
        console.log(header);
        let type: any;
        switch (header) {
          case '89504e47':
            type = 'image/png';
            break;
          case '47494638':
            type = 'image/gif';
            break;
          case 'ffd8ffe0':
          case 'ffd8ffe1':
          case 'ffd8ffe2':
          case 'ffd8ffe3':
          case 'ffd8ffe8':
            type = 'image/jpeg';
            break;
          default:
            type = 'unknown';
            break;
        }
        console.log(type);

      };

const blob=文件[0]；
const fileReader=new fileReader（）；
readAsArrayBuffer（blob）；
fileReader.onloadend=（e）=>{
常数arr=（新的Uint8Array（
我正在尝试检测图像是否损坏。因此，检查extesnion无法确认图像是否为jpg？我想我几年前做了类似的事情-从二进制数据获取扩展。我确信你可以在javascript中获取图像的二进制数据，但不太确定是否从中提取扩展。让我用谷歌搜索一下。是的，我们可以得到base64字符串，甚至我也在试图找出一种方法来检测base64的格式。我确信这是可能的，因为有一个网站canva.com，它检测并提示一个错误，看起来类似于下面的重复链接
      const blob = files[0];
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(blob);
      fileReader.onloadend = (e) => {
        const arr = (new Uint8Array(<any>e.target.result)).subarray(0, 4);
        let header = '';
        for (let i = 0; i < arr.length; i++) {
          header += arr[i].toString(16);
        }
        console.log(header);
        let type: any;
        switch (header) {
          case '89504e47':
            type = 'image/png';
            break;
          case '47494638':
            type = 'image/gif';
            break;
          case 'ffd8ffe0':
          case 'ffd8ffe1':
          case 'ffd8ffe2':
          case 'ffd8ffe3':
          case 'ffd8ffe8':
            type = 'image/jpeg';
            break;
          default:
            type = 'unknown';
            break;
        }
        console.log(type);

      };