vue 里怎么通过魔数（magic number）去限制上传文件类型？-阿里云开发者社区

利用 input 的 accept 属性进行限制

accept 属性规定了可通过文件上传提交的服务器接受的文件类型。

<input type="file">

不限制，上传这里的话就会显示所有的文件。

限制格式1

<input type="file" accept=".pdf, .xls, .txt">

限制格式2

<input type="file" accept="image/gif, video/mp4">

加了之后就会变成自定义文件类型的选择

<input type="file" accept="video/*, image/*">

属性值

值	描述
audio/*	接受所有的声音文件。
video/*	接受所有的视频文件。

image/*	接受所有的图像文件。
MIME_type	一个有效的 MIME 类型，不带参数。请参阅 IANA MIME 类型，获得标准 MIME 类型的完整列表。

标准 MIME 类型

该属性只能用于提示用户选择什么样的类型，因为用户还是可以选择所有文件进行其他类型文件的上传。

利用上传文件的对象去限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传限制文件类型</title>
</head>
<body>
    <input type="file" onchange="handleChange(event)">
    <script>
        function handleChange(event) {
            console.log(event.target.files)
        }
    </script>
</body>
</html>

我们可以通过 file 对象的 name 或者 type 属性去校验文件类型进行限制。

上面两种，单纯的添加属性，以及以文件后缀名(扩展名)、文件类型进行截取的方式来进行限制，很容易绕过限制，进行上传。为了避免这些情况，我们可以根据文件的头信息，来判断文件真正的格式。

下面先了解一下魔数（magic number）。

什么是魔数（magic number）？

魔数这个词在不同领域代表不同的含义。在计算机领域，魔数有两个含义，一指用来判断文件类型的魔数；二指程序代码中的魔数，也称魔法值。

判断文件类型的魔数

很多类型的文件，其起始的几个字节的内容是固定的（或是有意填充，或是本就如此）。因此这几个字节的内容也被称为魔数 (magic number)，因为根据这几个字节的内容就可以确定文件类型。

例如：

FreeBSD 上 ELF 文件的 magic number 就是文件的前四个字节依次为"7f 45 4c 46"，对应的 ascii 字符串即 “^?ELF”。

tar 文件的 magic number 是从第 257 个字节起为 “ustar”。

PE 文件中，在 DOS-根之后是一个 32 位的签名以及魔数 0x00004550 (IMAGE_NT_SIGNATURE) 意为“NT签名”，也就是PE签名；十六进制数 45 和 50 分别代表 ASCII 码字母 P 和 E，它使任何 PE 文件都是一个有效的 MS-DOS 可执行文件。

Java 的 .class 文件，开头的 4 个字节 0xCAFEBABE，这是 Java 初代开发小组最喜欢的一种咖啡 Peet’s Coffee 的爱称。

Linux 操作系统下没有文件扩展名，判断文件类型凭借的就是文件的内容，也就是魔数。

linux 命令 file 实现原理：大致就是读取一个文件的前面 1024 个字节，然后根据 magic (/etc/magic 或者 /usr/share/misc/magic) 里对应的规则分析出文件头，并打印输出。

文件头标志大全

参考：文件头标志大全

比如：png 的头文件标识

利用十六进制编辑器查看魔数

大家可以先安装十六进制编辑器【软件推荐】免费的Windows十六进制编辑器推荐，我这边安装的是 HxD 编辑器。

下面打开一个 png 文件看看。

点击文件，选择打开，选择一张 png 图片，点击打开。

打开之后我们可以看到界面的数据如下：

我们可以看到前面 8 个 89 50 4E 47 0D 0A 1A 0A 符合头文件标识里的 png 类型

我们再看一个 flv 文件，我们可以看到前面 4 个 46 4C 56 01 符合头文件标识里的 flv 类型

怎么获取文件的十六进制数据进行限制？

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说，FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传限制文件类型</title>
</head>
<body>
    <input type="file" onchange="handleChange(event)">
    <script>
        function handleChange(event) {
            console.log(event.target.files)
            const [ file ] = event.target.files;
            console.log(file);
            const fileReader = new FileReader();
            // readAsArrayBuffer 开始读取指定的 Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
            fileReader.readAsArrayBuffer(file);
            // 该事件在读取操作完成时触发。
            fileReader.onload = function(e) {
                console.log("读取文件 ArrayBuffer 数据成功", e);
                console.log(fileReader.result);
            }
            // 该事件在读取操作发生错误时触发。
            fileReader.onerror = function(err) {
                console.error("读取文件 ArrayBuffer 数据失败", err);
            }
        }
    </script>
</body>
</html>

我们上传一个 png 的图片，看看打印的数据：

接下来需要将这个 ArrayBuffer 数据转化成16进制的数据，我们改造一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传限制文件类型</title>
</head>
<body>
    <input type="file" onchange="handleChange(event)">
    <script>
        // ArrayBuffer 转 16进度字符串
        function ab2hex(buffer){
            // Uint8Array 数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
            const hexArr = Array.prototype.map.call(
                new Uint8Array(buffer),
                function(bit) {
                    console.log(bit)
                    return ("00" + bit.toString(16)).slice(-2).toUpperCase();
                }
            )
            return hexArr.join(" ");
        }
        function handleChange(event) {
            console.log(event.target.files)
            const [ file ] = event.target.files;
            console.log(file);
            const fileReader = new FileReader();
            // readAsArrayBuffer 开始读取指定的 Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
            fileReader.readAsArrayBuffer(file.slice(0, 8));
            // 该事件在读取操作完成时触发。
            fileReader.onload = function(e) {
                console.log("读取文件 ArrayBuffer 数据成功", e);
                const hex = ab2hex(fileReader.result);
                console.log(hex);
                console.log("文件类型是png吗？", hex === "89 50 4E 47 0D 0A 1A 0A");
            }
            // 该事件在读取操作发生错误时触发。
            fileReader.onerror = function(err) {
                console.error("读取文件 ArrayBuffer 数据失败", err);
            }
        }
    </script>
</body>
</html>

上传一张 png，测试结果如下，发现没有问题

上传一个 flv ，结果如下：输出了 hex 为 46 4C 56 01 01 00 00 00，前面 4 个满足 flv 类型。

我们可以自己封装方法去校验文件的类型，比如，通过 file 跟截取的长度去封装一个返回 hex 的公共函数，然后其他的类型函数做判断处理。

我用 vue 实现一下类似的方法：

<template>
  <div class="about">
    <h1>kaimo 上传限制文件类型</h1>
    <input type="file" @change="handleChange($event)" />
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {};
  },
  methods: {
    // ArrayBuffer 转 16进度字符串
    ab2hex(buffer) {
      // Uint8Array 数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
      const hexArr = Array.prototype.map.call(
        new Uint8Array(buffer),
        function (bit) {
          console.log(bit);
          return ("00" + bit.toString(16)).slice(-2).toUpperCase();
        }
      );
      return hexArr.join(" ");
    },
    // 获取文件 16 进度字符串
    getFileHex(file, num) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        // readAsArrayBuffer 开始读取指定的 Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
        fileReader.readAsArrayBuffer(file.slice(0, num));
        // 该事件在读取操作完成时触发。
        fileReader.onload = e => {
          console.log("读取文件 ArrayBuffer 数据成功", e);
          const hex = this.ab2hex(fileReader.result);
          console.log(hex);
          resolve(hex);
        };
        // 该事件在读取操作发生错误时触发。
        fileReader.onerror = err => {
          console.error("读取文件 ArrayBuffer 数据失败", err);
          reject(err);
        };
      });
    },
    // 校验是否是png
    async checkFileIsPng(file) {
      const res = await this.getFileHex(file, 8);
      console.log("校验 png hex", res);
      return res === "89 50 4E 47 0D 0A 1A 0A";
    },
    // 校验是否是flv
    async checkFileIsFlv(file) {
      const res = await this.getFileHex(file, 4);
      console.log("校验 flv hex", res);
      return res === "46 4C 56 01";
    },
    // 上传文件改变
    async handleChange(event) {
      console.log(event.target.files);
      const [file] = event.target.files;
      console.log(file);
      console.log("文件类型是png吗？", await this.checkFileIsPng(file));
      console.log("文件类型是flv吗？", await this.checkFileIsFlv(file));
    },
  },
};
</script>

上传一张 png 图片

上传一个 flv 文件

这样一个一个写有点麻烦，有没有更好的方式去检测二进制的文件格式。有，那就是使用 file-type 这个库。

利用 file-type 库进行文件类型的限制

file-type 库用于检测 Buffer/Uint8Array/ArrayBuffer 的文件类型。检测基于二进制的文件格式，而不是基于文本的格式，如 .txt、.csv、.svg 等。

原理：通过检查缓冲区的魔数来检测文件类型。

安装依赖：

npm i file-type@16.0.0

这里我们使用 16.0.0https://github.com/sindresorhus/file-type/tree/v16.0.0版本的，我试了一下 17.1.4 版本的，使用 file-type 的时候报错如下：

可能是我 node 版本太低，我的node版本是 12.13.0

用法：从缓冲区确定文件类型，缓冲区可能是文件开头的一部分：

代码如下：

<template>
  <div class="file-type">
    <h1>kaimo 测试 file-type 库</h1>
    <input type="file" @change="handleChange($event)" />
  </div>
</template>
<script>
const FileType = require('file-type');
export default {
  methods: {
    // 上传文件改变
    handleChange(event) {
      console.log(event.target.files);
      const [file] = event.target.files;
      console.log(file);
      const fileReader = new FileReader();
      // readAsArrayBuffer 开始读取指定的 Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
      fileReader.readAsArrayBuffer(file);
      // 该事件在读取操作完成时触发。
      fileReader.onload = (async (e) => {
        console.log("读取文件 ArrayBuffer 数据成功", e);
        console.log(fileReader.result);
        console.log(await FileType.fromBuffer(fileReader.result));
      });
      // 该事件在读取操作发生错误时触发。
      fileReader.onerror = (err) => {
        console.error("读取文件 ArrayBuffer 数据失败", err);
      };
    },
  },
};
</script>

测试结果：

上传 png 文件，打印出来了：

{ext: 'png', mime: 'image/png'}

上传 flv 文件，打印出来了：

{ext: 'flv', mime: 'video/x-flv'}

这样就很方便我们去判断上传的文件类型。

另外，你要查看更多支持校验的类型在 supported.js 里面。

vue 里怎么通过魔数（magic number）去限制上传文件类型？

利用 input 的 accept 属性进行限制

利用上传文件的对象去限制

什么是魔数（magic number）？

文件头标志大全

利用十六进制编辑器查看魔数

怎么获取文件的十六进制数据进行限制？

利用 file-type 库进行文件类型的限制

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

vue 里怎么通过魔数（magic number）去限制上传文件类型？

利用 input 的 accept 属性进行限制

利用上传文件的对象去限制

什么是魔数（magic number）？

文件头标志大全

利用十六进制编辑器查看魔数

怎么获取文件的十六进制数据进行限制？

利用 file-type 库进行文件类型的限制

热门文章

最新文章

相关课程

相关电子书