使用PE文件头判断上传的文件格式

通常情况下,仅在上传按钮上判断文件格式就可以了

   <input  type="file"
                 accept=".jpeg,.jpg,.jiff"
                 @change="handleChange">

但是有时用户会手动选择其他格式文件, 图片也可能是jpg后缀但是却不是jpg格式(破损或者编码错误)

手动选择其他格式文件

这种情况下,就需要使用文件头来判断文件的格式了

常见的文件头有这些:

1、JPEG (jpg)，文件头：FFD8FF。
2、GIF (gif)，文件头：47494638。
3、PNG (png)，文件头：89504E47。
4、TIFF (tif)，文件头：49492A00。
5、Windows Bitmap (bmp)，文件头：424DC001。
6、CAD (dwg)，文件头：41433130。
7、Adobe Photoshop (psd)，文件头：38425053。
8、XML (xml)，文件头：3C3F786D6C。
9、HTML (html)，文件头：68746D6C3E10。
10、Real Audio (ram)，文件头：2E7261FD。
11、Real Media (rm)，文件头：2E524D46。
12、MPEG (mpg)，文件头：000001。

下面以判断是否为jpg图片为例， 先使用FileReader获取用户上传的文件，然后由ArrayBuffer 转成数组，再判断数组的前三位是否为jpg的文件头FFD8FF即可

html
   <input  type="file"
           accept=".jpeg,.jpg,.jiff"
           @change="handleChange">


js
handleChange(e) {
    const _this = this;
    e.preventDefault();
      const files = e.target.files || e.dataTransfer.files;
      const blob = new Blob([files[0]]);
      const reader = new FileReader();
      reader.onload = function (e) {
          // ArrayBuffer 转成数组
        const array = Array.prototype.slice.call(new Uint8Array(this.result));
        const notJPG = _this.testJPGHeader(array);
        if (notJPG) {
          _this.hasError = true;
          _this.errorMsg = '非jpg格式图片';
          return false;
        }
        /**
         * TODO
         */
      };
      reader.readAsArrayBuffer(blob);
  },
  testJPGHeader(JPGBuffer) {
    const JPGHeader = JPGBuffer.slice(0, 3);
    // jpg图片的PE值
    const HT_STD_HEADER = [0xff, 0xd8, 0xff];
    let notJPG = false;
    JPGHeader.forEach((v, i) => {
      if (HT_STD_HEADER[i] !== v) notJPG = true;
    });
    return notJPG;
  }