【實戰(zhàn)】JavaScript 如何檢測文件的類型？

在日常工作中，文件上傳是一個很常見的功能。在某些情況下，我們希望能限制文件上傳的類型，比如限制只能上傳 PNG 格式的圖片。針對這個問題，我們會想到通過 input 元素的 accept 屬性來限制上傳的文件類型：

<input type="file" id="inputFile" accept="image/png" />

這種方案雖然可以滿足大多數(shù)場景，但如果用戶把 JPEG 格式的圖片后綴名更改為 .png 的話，就可以成功突破這個限制。那么應(yīng)該如何解決這個問題呢？其實我們可以通過讀取文件的二進(jìn)制數(shù)據(jù)來識別正確的文件類型。在介紹具體的實現(xiàn)方案前，阿寶哥先以圖片類型的文件為例，來介紹一下相關(guān)的知識。

一、如何查看圖片的二進(jìn)制數(shù)據(jù)

要查看圖片對應(yīng)的二進(jìn)制數(shù)據(jù)，我們可以借助一些現(xiàn)成的編輯器，比如 Windows 平臺下的 WinHex 或 macOS 平臺下的 Synalyze It! Pro 十六進(jìn)制編輯器。這里我們使用 Synalyze It! Pro 這個編輯器，以十六進(jìn)制的形式來查看阿寶哥頭像對應(yīng)的二進(jìn)制數(shù)據(jù)。

二、如何區(qū)分圖片的類型

計算機(jī)并不是通過圖片的后綴名來區(qū)分不同的圖片類型，而是通過 “魔數(shù)”（Magic Number）來區(qū)分。 對于某一些類型的文件，起始的幾個字節(jié)內(nèi)容都是固定的，根據(jù)這幾個字節(jié)的內(nèi)容就可以判斷文件的類型。

常見圖片類型對應(yīng)的魔數(shù)如下表所示：

同樣使用 Synalyze It! Pro 這個編輯器，來驗證一下阿寶哥的頭像（abao.png）的類型是否正確：

由上圖可知，PNG 類型的圖片前 8 個字節(jié)是 0x89 50 4E 47 0D 0A 1A 0A。當(dāng)你把 abao.png 文件修改為 abao.jpeg 后，再用編輯器打開查看圖片的二進(jìn)制內(nèi)容，你會發(fā)現(xiàn)文件的前 8 個字節(jié)還是保持不變。但如果使用 input[type="file"] 輸入框的方式來讀取文件信息的話，將會輸出以下結(jié)果：

很明顯通過 文件后綴名或文件的 MIME 類型 并不能識別出正確的文件類型。接下來，阿寶哥將介紹在上傳圖片時，如何通過讀取圖片的二進(jìn)制信息來確保正確的圖片類型。

三、如何檢測圖片的類型

3.1 定義 readBuffer 函數(shù)

在獲取文件對象后，我們可以通過 FileReader API 來讀取文件的內(nèi)容。因為我們并不需要讀取文件的完整信息，所以阿寶哥封裝了一個 readBuffer 函數(shù)，用于讀取文件中指定范圍的二進(jìn)制數(shù)據(jù)。

function readBuffer(file, start = 0, end = 2) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file.slice(start, end));
  });
}

對于 PNG 類型的圖片來說，該文件的前 8 個字節(jié)是 0x89 50 4E 47 0D 0A 1A 0A。因此，我們在檢測已選擇的文件是否為 PNG 類型的圖片時，只需要讀取前 8 個字節(jié)的數(shù)據(jù)，并逐一判斷每個字節(jié)的內(nèi)容是否一致。

3.2 定義 check 函數(shù)

為了實現(xiàn)逐字節(jié)比對并能夠更好地實現(xiàn)復(fù)用，阿寶哥定義了一個 check 函數(shù)：

function check(headers) {
  return (buffers, options = { offset: 0 }) =>
    headers.every(
      (header, index) => header === buffers[options.offset + index]
    );
}

3.3 檢測 PNG 圖片類型

基于前面定義的 readBuffer 和 check 函數(shù)，我們就可以實現(xiàn)檢測 PNG 圖片的功能：

3.3.1 html 代碼

<div>
   選擇文件：<input type="file" id="inputFile" accept="image/*"
              onchange="handleChange(event)" />
   <p id="realFileType"></p>
</div>

3.3.2 JS 代碼

const isPNG = check([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]); // PNG圖片對應(yīng)的魔數(shù)
const realFileElement = document.querySelector("#realFileType");

async function handleChange(event) {
  const file = event.target.files[0];
  const buffers = await readBuffer(file, 0, 8);
  const uint8Array = new Uint8Array(buffers);
  realFileElement.innerText = `${file.name}文件的類型是：${
    isPNG(uint8Array) ? "image/png" : file.type
  }`;
}

以上示例成功運行后，對應(yīng)的檢測結(jié)果如下圖所示：

由上圖可知，我們已經(jīng)可以成功地檢測出正確的圖片格式。如果你要檢測 JPEG 文件格式的話，你只需要定義一個 isJPEG 函數(shù)：

const isJPEG = check([0xff, 0xd8, 0xff])

然而，如果你要檢測其他類型的文件，比如 PDF 文件的話，應(yīng)該如何處理呢？這里我們先使用 Synalyze It! Pro 編輯器來瀏覽一下 PDF 文件的二進(jìn)制內(nèi)容：

觀察上圖可知，PDF 文件的頭 4 個字節(jié)的是 0x25 50 44 46，對應(yīng)的字符串是 %PDF。為了讓用戶能更直觀地辨別出檢測的類型，阿寶哥定義了一個 stringToBytes 函數(shù)：

function stringToBytes(string) {
  return [...string].map((character) => character.charCodeAt(0));
}

基于 stringToBytes 函數(shù)，我們就可以很容易的定義一個 isPDF 函數(shù)，具體如下所示：

const isPDF = check(stringToBytes("%PDF"));

有了 isPDF 函數(shù)，你就實現(xiàn) PDF 文件檢測的功能了。但在實際工作中，遇到的文件類型是多種多樣的，針對這種情形，你可以使用現(xiàn)成的第三庫來實現(xiàn)文件檢測的功能，比如 file-type 這個庫。

其實基于文件的二進(jìn)制數(shù)據(jù)，除了可以檢測文件的類型之外，我們還可以讀取文件相關(guān)的元信息，比如圖片的尺寸、位深度、色彩類型和壓縮算法等，我們繼續(xù)以阿寶哥的頭像（abao.png）為例，來看一下實際的情況：

好的，在前端如何檢測文件類型就介紹到這里。在實際項目中，對于文件上傳的場景，出于安全考慮，建議小伙伴們在開發(fā)過程中，都限制一下文件上傳的類型。對于更嚴(yán)格的場景來說，就可以考慮使用阿寶哥介紹的方法來做文件類型的校驗。此外，如果你對前端如何處理二進(jìn)制數(shù)據(jù)感興趣可以閱讀 玩轉(zhuǎn)前端二進(jìn)制。

四、參考資源

• 玩轉(zhuǎn)前端二進(jìn)制
• MDN - FileReader