問(wèn)題再現(xiàn)
本人最近在做一個(gè)項(xiàng)目，項(xiàng)目中有上傳圖片的功能。上午 PM 提了一個(gè)需求，說(shuō)這里的上傳圖片只允許 jpg、png 格式。心想這還不簡(jiǎn)單，于是我三下五除二，通過(guò)判斷文件的 type 屬性是否是 image/jpeg 或 image/png 進(jìn)行校驗(yàn)。代碼如下：
const allowedFormats = ["image/jpeg", "image/png"]
function onFileChange({ raw }) {
const isAllowedFormats = allowedFormats.includes(raw.type)
if (!isAllowedFormats) {
this.$message.error("圖片只能是 JPG 或 PNG 格式！")
return
}
// ...
}
找了幾張圖片測(cè)試了一下，嗯，效果還可以。于是信心滿滿的提測(cè)，但不料很快就收到了 BUG，BUG 單上赫然寫(xiě)著幾個(gè)大字：
jfif 格式也能上傳成功。
jfif ？這是啥玩意，我倒是第一次聽(tīng)說(shuō)這種格式。
什么是 jfif ？
上網(wǎng)一搜才發(fā)現(xiàn) jfif 也是一種圖片存儲(chǔ)格式，根據(jù)網(wǎng)上的介紹，該格式直接使用 JPEG 標(biāo)準(zhǔn)，但比普通 JPEG 包含較少的數(shù)據(jù)。它的全稱是 JPEG File Interchange Format，翻譯過(guò)來(lái)就是 JPEG 檔案交換格式。
于是我通過(guò) FileDesc 網(wǎng)站查看了一下該格式，發(fā)現(xiàn) jfif 格式的 MIME 類(lèi)型的確是 image/jpeg，而不是我們以為的 image/jfif。
于是找 QA 要了一個(gè)樣本，測(cè)試之后發(fā)現(xiàn)的確能通過(guò)我們的校驗(yàn)。而輸出的 type 正是 image/jpeg 格式。
為什么 jfif 輸出的 type 是 image/jpeg ？ 這就不得不提 MIME 了。
什么是 MIME？
MIME，全稱 Multipurpose Internet Mail Extensions，即多用途互聯(lián)網(wǎng)郵件擴(kuò)展。是一個(gè)用來(lái)表示文檔、文件或字節(jié)流的性質(zhì)和格式的標(biāo)準(zhǔn)。
MIME 的組成結(jié)構(gòu)非常簡(jiǎn)單，由類(lèi)型與子類(lèi)型兩個(gè)字符串中間用 / 分隔而組成，即 type/subtype。type 表示可以被分多個(gè)子類(lèi)的獨(dú)立類(lèi)別，subtype 表示細(xì)分后的每個(gè)類(lèi)型。
比如：
text/plain
image/jpeg
audio/mpeg
video/mp4
application/javascript
而通過(guò)查閱 IETF 官方文檔 發(fā)現(xiàn)，jfif 明確被規(guī)定為 image/jpeg 類(lèi)型。以下是原文：
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].
總結(jié)
到這里，我們就明白了：jfif 其實(shí)是作為一種 jpg 格式，屬于 jpg 的分支。那么被校驗(yàn)為 image/jpeg 其實(shí)也是正確的結(jié)果。
參考資料：
