省流量，先說結論：前端無法通過現有API獲取文件真實格式，必須拿到文件的二進制內容，然后和文件規范定義比對，才能得到真實的文件格式。

背景

前端經常會有圖片上傳的業務需求，例如下圖的的需求，要求上傳的圖片的格式為PNG

在前端，常規的文件上傳處理方式是

<form action="uploadFile.do" enctype="multipart/form-data" type="post" ><input type="file" onchange=""><input type="submit"> </form>

如果要限制文件格式為PNG那就很簡單，只需修改其 input 標簽的 accpet 屬性限制可接受的文件類型，代碼如下

<input type="file" accept=".png"/>

參考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers

問題

但，這并不能真正的解決問題，accpet 只是限制了用戶選擇的文件后綴名，這個特性依賴于瀏覽器的具體實現，而且用戶還可以強制修改上傳文件框中的文件類型

另外“聰明”的用戶會總直接修改文件后綴名。比如把 logo.jpg 修改為 logo.png。

所以，我們需要更進一步的判斷，一般來說我們都是從 <input> 元素的 files 屬性中取得用戶準備上傳的文件 FileList 其中的每一個File對象都有type 屬性，是這個文件的mime類型，如下圖

但不幸的是，這個mime的值，目前瀏覽器的實現是文件擴展來假設的，當客戶強制修改后綴名（上圖即是將ico文件修改為了png文件），或者沒有拿到后綴名（下圖），這個mime也是不準確的

要想知道用戶上傳的文件真實格式，還得再進一步。

解決方案

既然從瀏覽器的對象中都無法獲取到真實的文件類型，那我們再進一步，把文件的二進制內容讀出來，按照規范去比對。

因為之前需求中常用的就是 png、jpg、先查閱文件的定義

• PNG Specification, Version 1.2
• JPEG_File_Interchange_Format
• ICO_(file_format)

/*** 真實文件格式（前4個字節)*/ export const ImgExt2Hex = {'jpg': ['ffd8ffe0', 'ffd8ffe1', 'ffd8ffe2', 'ffd8ffe3'],'png': ['89504e47'],'ico': ['100'], }

定義檢測函數

/*** 檢測圖片是否是預期的類型* @param {File} imgFile 圖片文件對象* @param {string} imgExt 文件預期真實類型* @return {boolean} 文件類型是否和預期一致*/ export const vaildImageType = (imgFile, imgExt) => {const FR = new FileReader;return new Promise((reslove) => {FR.onload = (e) => {const { type } = imgFile;const correctExtHex = ImgExt2Hex[imgExt];let af = e.target.result, view = new DataView(af), first4Byte = view.getUint32(0, false) // 獲取32bit數, hexValue = Number(first4Byte).toString(16);if (!type || !correctExtHex) {return reslove(false)}return reslove(correctExtHex.indexOf(hexValue) > -1);}FR.readAsArrayBuffer(imgFile);}) }

使用示例（React） await vaildImageType(file, data.type)

handleChange = async (e) => {const { data, type } = this.propsconst file = e.target.files[0]if (!await vaildImageType(file, data.type)) {return ; // 圖片格式不正確} }

后記

如上，已經簡單解決了文件上傳業務中圖片格式的判斷，可能單從文件頭4個字節來判斷并不是十分準確，但是結合文件后綴+文件頭判斷，基本可以在業務場景中處理 99.9%的格式問題了。

但這件事還可以繼續深入，繼續拓展功能，例如下面列出的，以及將這些功能集成到一個npm包里去（看大家的需求了 ;-p）

• 常用圖片、文件格式支持（webp、bmp、tiff、psd、ico）
• 圖片其他屬性的讀取（尺寸、extif）
• ico 文件內部所有圖片資源尺寸、內容讀取

總結

以上是生活随笔為你收集整理的return view前端怎么获取_前端判断上传图片格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。