奇怪！为什么 jfif 格式会被校验为 image/jpeg？

奇怪！为什么 jfif 格式会被校验为 image/jpeg？

1. 场景

   项目中有上传图片的功能。最近，PM 提了一个需求，说上传图片只允许 jpg、png 格式。于是我三下五除二，通过判断文件的 type 属性是否是 image/jpeg 或 image/png 进行校验。

   const allowedFormats = ['image/jpeg', 'image/png']
   
   function onFileChange({ raw }) {
     const isAllowedFormats = allowedFormats.includes(raw.type)
   
     if (!isAllowedFormats) {
       this.$message.error('图片只能是 JPG 或 PNG 格式！')
       return
     }
   
     // ...
   }
   

   测试下，效果还可以。于是信心满满的提测，但不料却收到了 BUG ？

   BUG 单上赫然写着几个大字：jfif 格式也能上传成功。

2. 什么是 jfif ？

   jfif ？这是啥玩意，我倒是第一次听说这种格式。

   上网一搜才发现 jfif 也是一种图片存储格式，该格式直接使用 JPEG 标准但比普通 JPEG 包含较少的数据。jfif 的全称是 JPEG File Interchange Format，即 JPEG 档案交换格式。

   我们通过 FileDesc 查看了一下该格式，发现 jfif 格式的 MIME 类型的确是 image/jpeg，而不是我们以为的 image/jfif。

   于是找 QA 要了一个样本，测试之后发现的确能通过我们的校验。而输出的 type 正是 image/jpeg 格式。

   为什么 jfif 输出的 type 是 image/jpeg ？ 这就不得不提 MIME 了。

3. 什么是 MIME 类型？

   MIME，全称 Multipurpose Internet Mail Extensions，即多用途互联网邮件扩展。是一个用来表示文档、文件或字节流的性质和格式的标准。

   MIME 的组成结构非常简单，由类型与子类型两个字符串中间用 / 分隔而组成，即 type/subtype。type 表示可以被分多个子类的独立类别，subtype 表示细分后的每个类型。

   比如：

   text/plain
   image/jpeg
   audio/mpeg
   video/mp4
   application/javascript
   

   而我们通过查阅 IETF 官方文档 发现，jfif 明确被规定为 image/jpeg 类型。以下是原文：

   RFC 1341MIME: Multipurpose Internet Mail ExtensionsJune 1992

   7.5 The Image Content-Type

   A Content-Type of "image" indicates that the bodycontains an image. The subtype names the specific image format. These names are case insensitive. Two initial subtypes are "jpeg" for the JPEG format, JFIF encoding, and "gif" for GIF format [GIF].

参考资料：

• MIME 类型

• MIME 类型 - HTTP | MDN

• 关于文件：MIME 类型“ image / jpg”是否与“ image / jpeg”相同？ | 码农家园