BLOG

笔记:使用 JavaScript 识别文件 MIME TYPE 类型 - 后续问题和值得记录

前言

笔记:使用 JavaScript 识别文件 MIME TYPE 类型》有一些后续问题和值得记录的地方,因为第一篇笔记本身篇幅已经很长,所以另开一片单独做记录,上下一共两篇:

通过裁切文件获得文件头部分

在原来的问题解决办法中,读取文件二进制内容到检测文件类型的步骤:input 拿到 file后,通过 readAsArrayBuffer() 方法对二进制数据进行包装,从而进行文件类型的检测。

上面提到的步骤的伪代码

如果在这里对文件类型的检测是后续文件上传操作的前奏,那么检测本身并不需要提取全部文件内容,有以下几个原因:

  1. 文件头,比如 JEPG,只需要针对开始的四个字节进行比对是否是 FF D8 FF E1之类;别的文件头验证也不会很长,这时不需要文件的全部二进制内容;
  2. 上传数据接口可能是二进制直接上传,也有可能会通过 canvas 剪裁之后转换成 base64 的格式,这时也不需要文件的全部二进制数据内容;
  3. 文件通过检测可能不合法,那么之后不管是可能有的剪裁或者上传操作都会终端取消,所以为什么会需要文件的全部二进制内容 ???

所以针对文件类型的验证只需要文件头部那一段非常短的二进制数据,原来全部读取并不妥善,特别是实操中遇到的文件尺寸比较大的,会有卡顿现象。

优化主要依靠 Blob 类下的 slice() 方法,前文也提到,File 类直接继承于 Blob 类,所以 File 本身也可以使用 slice() 方法对其自身进行裁切,提取开头的一小部分出来。

Blob.slice() 本身的使用方法不做展开,直接上伪代码:

值得学习的 Buffer to String

这一部分并不是解决或者优化什么问题,只是 some how worth noting。针对是上一篇中叙述 「FF D8 FF E1 是什么?」的地方,有一个 CodePen 用来展示文件转换成二进制内容的 demo

最近在翻 Github 的时候非常偶然看到了一个库:tapjs/buffer-to-string ,如其名,不过是将 Nodejs 中的 Buffer 转换成 hex 值的展示。index.js 中的代码并不长,一共只有十八行,非常值得学习。

See the Pen Get binary/hex representation of an image by Lien (@movii) on CodePen.

原始 demo 中对二进制数据可视化的操作

Buffer to String

Displays buffer content in hex. Characters are grouped into two-character bytes, with a customizable line wrap width.