js校验错误图片

前端上传图片文件时，可能收到上传非图片文件，前端需要对其进行判断。

1、根据文件名判断

    uploadFile(file){
      // 截取文件后缀
      const fileSuffix = file.name.split('.').pop();
      // 转成小写，判断是否正确格式
      const isImage = ['jpg', 'jpeg', 'png'].includes(fileSuffix.toLowerCase());
      if (!isImage) {
        this.$Message.error(file.name + '上传失败，只能上传jpg/png/jpeg文件');
        return;
      }
    }

2、根据文件类型判断

    uploadFile(file){
      // 图片类型 image/png 等以 image/ 开头
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        this.$Message.error('请上传图片文件');
        return;
      }
    }

3、读取文件内容判断

非图片文件修改后缀为图片格式上传会报错，通过前两种方法可能无法正确识别图片是否正确，可以使用以下读取文件内容的方法。

    async uploadFile(file) {
      // 读取文件内容
      const fileContent = await this.readFileContent(file);
      // 校验文件内容是否为图片格式
      if (!this.isImageFile(fileContent)) {
        this.$Message.error('请上传正确的图片文件');
        return;
      }
    },
    readFileContent(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          resolve(event.target.result);
        };
        reader.readAsArrayBuffer(file);
      });
    },
    isImageFile(fileContent) {
      // 示例：检查 Magic Number 或特定图像格式的标识
      const view = new DataView(fileContent);
      const magicNumber = view.getUint16(0, false);
      // 常见图片格式的 Magic Number ：
      // JPEG：0xFFD8、PNG：0x8950、GIF：0x4749、BMP：0x424D
      return magicNumber === 0xFFD8 || magicNumber === 0x8950; 
    }