JavaScript 如何檢測文件的類型？

在平常工做中，文件上傳是一個很常見的功能。在某些狀況下，咱們但願能限制文件上傳的類型，好比限制只能上傳 PNG 格式的圖片。針對這個問題，咱們會想到經過 input 元素的 accept 屬性來限制上傳的文件類型：

<input type="file" id="inputFile" accept="image/png" />
複製代碼

這種方案雖然能夠知足大多數場景，但若是用戶把 JPEG 格式的圖片後綴名更改成 .png 的話，就能夠成功突破這個限制。那麼應該如何解決這個問題呢？其實咱們能夠經過讀取文件的二進制數據來識別正確的文件類型。在介紹具體的實現方案前，阿寶哥先以圖片類型的文件爲例，來介紹一下相關的知識。

1、如何查看圖片的二進制數據

要查看圖片對應的二進制數據，咱們能夠藉助一些現成的編輯器，好比 Windows 平臺下的 WinHex 或 macOS 平臺下的 Synalyze It! Pro 十六進制編輯器。這裏咱們使用 Synalyze It! Pro 這個編輯器，以十六進制的形式來查看阿寶哥頭像對應的二進制數據。

關注「全棧修仙之路」閱讀阿寶哥原創的 4 本免費電子書（累計下載 3萬+）及 50 幾篇 TS 系列教程。

2、如何區分圖片的類型

計算機並非經過圖片的後綴名來區分不一樣的圖片類型，而是經過 「魔數」（Magic Number）來區分。 對於某一些類型的文件，起始的幾個字節內容都是固定的，根據這幾個字節的內容就能夠判斷文件的類型。

常見圖片類型對應的魔數以下表所示：

文件類型	文件後綴	魔數
JPEG	jpg/jpeg	0xFF D8 FF
PNG	png	0x89 50 4E 47 0D 0A 1A 0A
GIF	gif	0x47 49 46 38（GIF8）
BMP	bmp	0x42 4D

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

由上圖可知，PNG 類型的圖片前 8 個字節是 0x89 50 4E 47 0D 0A 1A 0A。當你把 abao.png 文件修改成 abao.jpeg 後，再用編輯器打開查看圖片的二進制內容，你會發現文件的前 8 個字節仍是保持不變。但若是使用 input[type="file"] 輸入框的方式來讀取文件信息的話，將會輸出如下結果：

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

3、如何檢測圖片的類型

3.1 定義 readBuffer 函數

在獲取文件對象後，咱們能夠經過 FileReader API 來讀取文件的內容。由於咱們並不須要讀取文件的完整信息，因此阿寶哥封裝了一個 readBuffer 函數，用於讀取文件中指定範圍的二進制數據。

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 個字節是 0x89 50 4E 47 0D 0A 1A 0A。所以，咱們在檢測已選擇的文件是否爲 PNG 類型的圖片時，只須要讀取前 8 個字節的數據，並逐一判斷每一個字節的內容是否一致。

3.2 定義 check 函數

爲了實現逐字節比對並可以更好地實現複用，阿寶哥定義了一個 check 函數：

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

3.3 檢測 PNG 圖片類型

基於前面定義的 readBuffer 和 check 函數，咱們就能夠實現檢測 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圖片對應的魔數
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 }`;
}
複製代碼

以上示例成功運行後，對應的檢測結果以下圖所示：

由上圖可知，咱們已經能夠成功地檢測出正確的圖片格式。若是你要檢測 JPEG 文件格式的話，你只須要定義一個 isJPEG 函數：

const isJPEG = check([0xff, 0xd8, 0xff])
複製代碼

然而，若是你要檢測其餘類型的文件，好比 PDF 文件的話，應該如何處理呢？這裏咱們先使用 Synalyze It! Pro 編輯器來瀏覽一下 PDF 文件的二進制內容：

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

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

基於 stringToBytes 函數，咱們就能夠很容易的定義一個 isPDF 函數，具體以下所示：

const isPDF = check(stringToBytes("%PDF"));
複製代碼

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

其實基於文件的二進制數據，除了能夠檢測文件的類型以外，咱們還能夠讀取文件相關的元信息，好比圖片的尺寸、位深度、色彩類型和壓縮算法等，咱們繼續以阿寶哥的頭像（abao.png）爲例，來看一下實際的狀況：

好的，在前端如何檢測文件類型就介紹到這裏。在實際項目中，對於文件上傳的場景，出於安全考慮，建議小夥伴們在開發過程當中，都限制一下文件上傳的類型。對於更嚴格的場景來講，就能夠考慮使用阿寶哥介紹的方法來作文件類型的校驗。此外，若是你對前端如何處理二進制數據感興趣能夠閱讀 玩轉前端二進制。

關注「全棧修仙之路」閱讀阿寶哥原創的 4 本免費電子書（累計下載 3萬+）及 11 篇 Vue 3 進階系列教程。想一塊兒學習 TS/Vue 3.0 的小夥伴能夠添加阿寶哥微信 —— semlinker。

4、參考資源

• 玩轉前端二進制
• MDN - FileReader