文件上传前前端通过魔数（magic number）去限制上传文件类型

阿乐今天敲代码没

已于 2023-07-20 11:18:51 修改

阅读量1k

点赞数 1

分类专栏：笔记文章标签：前端

于 2023-07-18 14:13:30 首次发布

本文链接：https://blog.csdn.net/qq_45840993/article/details/131786258

版权

笔记专栏收录该内容

28 篇文章 3 订阅

订阅专栏

文章讨论了在项目中如何准确判断文件类型，指出单纯依赖文件后缀可能存在风险，因为后缀可被修改且某些文件可能没有后缀。作者提出使用文件的头信息，特别是魔数（magicnumber）来识别文件的真实格式，以ELF文件为例展示了如何通过JavaScript的FileReaderAPI读取文件头四字节并进行比较，从而确定文件类型。

摘要由CSDN通过智能技术生成

问题

最近项目需求文件上传前判断文件类型，有的同学会说用文件后缀判断不就好啦。其一，文件后缀可以修改，正确性待考究；其二，有些文件并没有文件后缀。这就需要我们动动脑筋啦，其实我们可以根据文件的头信息，来判断文件真正的格式

前提：什么是魔数（magic number）？

对于某一些类型的文件，起始的几个字节内容都是固定的，根据这几个字节的内容就可以判断文件的类型，这就是魔数。例如常见的图片类型对应的魔数:
在这里插入图片描述

解决办法

这里以elf文件为例进行判断：

<template>
  <el-upload
    class="avatar-uploader"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>

<script setup>
const isElfFile=(file)=> {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = function () {
      const magicNumber = new Uint8Array(reader.result.slice(0, 4));
      const elfMagic = new Uint8Array([0x7F, 0x45, 0x4C, 0x46]);

      for (let i = 0; i < magicNumber.length; i++) {
        if (magicNumber[i] !== elfMagic[i]) {
          resolve(false);
          return;
        }
      }

      resolve(true);
    };
    reader.onerror = function () {
      resolve(false);
    };

    reader.readAsArrayBuffer(file.slice(0, 4));
  });
}

const beforeUpload= async file=>{
const isElfType=await isElfFile(file)
if(isElfType){
//判断当文件类型为elf时需要进行的操作，巴拉巴拉。。。
}
}
</script>