在JavaScript中，可以通過(guò)讀取文件的二進(jìn)制數(shù)據(jù)并檢查文件的 “魔術(shù)數(shù)字”（magic number） 來(lái)確定文件類型。魔術(shù)數(shù)字是指文件開(kāi)始部分的一組特定的字節(jié)序列，不同的文件類型會(huì)有不同的魔術(shù)數(shù)字。

JavaScript中實(shí)現(xiàn)

以下是一個(gè)簡(jiǎn)單的示例，展示如何使用FileReader API來(lái)讀取文件的二進(jìn)制數(shù)據(jù)，并基于前幾個(gè)字節(jié)來(lái)判斷文件類型：

function detectFileType() {
    const input = document.getElementById('fileInput');
    const file = input.files[0];

    if (!file) {
        console.log('No file selected.');
        return;
    }

    const reader = new FileReader();

    reader.onloadend = function() {
        const arrayBuffer = reader.result;
        const byteArray = new Uint8Array(arrayBuffer);

        // 檢查文件類型
        const fileType = getFileType(byteArray);
        document.getElementById('result').innerText = `Detected file type: ${fileType}`;
    };

    reader.readAsArrayBuffer(file);
}

function getFileType(byteArray) {
    // 文件類型及其對(duì)應(yīng)的魔術(shù)數(shù)字，下面這些魔術(shù)數(shù)字不保證準(zhǔn)確
    const fileTypes = [
        { signature: [0xFF, 0xD8, 0xFF], type: 'JPEG' },
        { signature: [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A], type: 'PNG' },
        { signature: [0x47, 0x49, 0x46, 0x38], type: 'GIF' },
        { signature: [0x52, 0x49, 0x46, 0x46], type: 'WEBP' },
        { signature: [0x42, 0x4D], type: 'BMP' },
    ];

    for (const type of fileTypes) {
        let match = true;
        for (let i = 0; i < type.signature.length; i++) {
            if (byteArray[i] !== type.signature[i]) {
                match = false;
                break;
            }
        }
        if (match) {
            return type.type;
        }
    }

    return 'Unknown';
}

微信小程序中實(shí)現(xiàn)

那么如何在微信小程序里面如何實(shí)現(xiàn)類似的功能。

• 期初以為小程序里面是不能實(shí)現(xiàn)的，因?yàn)椴恢?code>Uint8Array在小程序里面有沒(méi)有，經(jīng)過(guò)驗(yàn)證有這個(gè)函數(shù)。
• 在小程序中使用fs.readFileSync(filePath)可以獲得文件的ArrayBuffer，這樣就能完美解決問(wèn)題
  • filePath必須是小程序本地地址才行，不能使用網(wǎng)絡(luò)地址
  • const fs = uni.getFileSystemManager()

完整代碼

// pages/index/index.js
Page({
  data: {
    fileType: ''
  },

  chooseFile: function() {
    wx.chooseMessageFile({
      count: 1,
      success: (res) => {
        this.readFile(res.tempFiles[0].path);
      }
    });
  },

  readFile: function(filePath) {
    const fs = wx.getFileSystemManager();
    fs.readFile({
      filePath: filePath,
      encoding: 'binary', // 注意這里使用 'binary' 模式讀取文件
      success: (res) => {
        const buffer = res.data;
        const fileType = this.detectFileType(buffer);
        this.setData({
          fileType: fileType
        });
      },
      fail: (err) => {
        console.error('Failed to read file:', err);
      }
    });
  },

  detectFileType: function(buffer) {
    // 文件類型及其對(duì)應(yīng)的魔術(shù)數(shù)字，下面這些魔術(shù)數(shù)字不保證準(zhǔn)確
    const fileTypes = [
      { signature: [0xFF, 0xD8, 0xFF], type: 'JPEG' },
      { signature: [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A], type: 'PNG' },
      { signature: [0x47, 0x49, 0x46, 0x38], type: 'GIF' },
      { signature: [0x52, 0x49, 0x46, 0x46], type: 'WEBP' },
      { signature: [0x42, 0x4D], type: 'BMP' },
    ];

    const header = new Uint8Array(buffer.slice(0, 8)); // 取出前8個(gè)字節(jié)作為頭部

    for (const type of fileTypes) {
      let match = true;
      for (let i = 0; i < type.signature.length; i++) {
        if (header[i] !== type.signature[i]) {
          match = false;
          break;
        }
      }
      if (match) {
        return type.type;
      }
    }

    return 'Unknown';
  }
});

注意

取出前12個(gè)字節(jié)作為頭部

對(duì)于MP4格式的文件，其魔術(shù)數(shù)字（signature）通常以 ftyp 原子開(kāi)始，后面跟著 isom 字符串。

這里的 ftyp 是一個(gè)原子（box），它定義了文件的兼容性品牌和版本。isom 表示該文件遵循 ISO 基礎(chǔ)媒體文件格式（ISO Base Media File Format），這是 MP4 格式的標(biāo)準(zhǔn)基礎(chǔ)。

const header = new Uint8Array(buffer.slice(0, 12));

相對(duì)準(zhǔn)確一點(diǎn)的魔術(shù)數(shù)字

下面是相對(duì)全面和準(zhǔn)確的魔術(shù)數(shù)字，及相關(guān)代碼

const fs = uni.getFileSystemManager()
const logger = log()

const imageFileTypes = [
  { signature: [0xFF, 0xD8, 0xFF], type: 'JPEG' },
  { signature: [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A], type: 'PNG' },
  { signature: [0x47, 0x49, 0x46, 0x38], type: 'GIF' },
  { signature: [0x52, 0x49, 0x46, 0x46], type: 'WEBP' },
  { signature: [0x42, 0x4D], type: 'BMP' },
  { signature: [0x50, 0x33, 0x20, 0x23], type: 'PPM' }, // Portable Pixmap Format
  { signature: [0x50, 0x62, 0x20, 0x23], type: 'PGM' }, // Portable Graymap Format
  { signature: [0x50, 0x70, 0x20, 0x23], type: 'PPM' }, // Portable PixMap Format
  { signature: [0x50, 0x6D, 0x20, 0x23], type: 'PGM' }, // Portable GrayMap Format
  { signature: [0x50, 0x70, 0x20, 0x23], type: 'PBM' }, // Portable BitMap Format
  { signature: [0x50, 0x6D, 0x20, 0x23], type: 'PBM' }, // Portable BitMap Format
  { signature: [0x00, 0x00, 0x01, 0x00], type: 'ICO' },
]

const videoFileTypes = [
  { signature: [0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70, 0x69, 0x73, 0x6F, 0x6D], type: 'MP4' },
  { signature: [0x00, 0x00, 0x00, 0x20, 0x66, 0x74, 0x79, 0x70, 0x69, 0x73, 0x6F, 0x6D], type: 'MP4' },
  { signature: [0x00, 0x00, 0x00, 0x1C, 0x66, 0x74, 0x79, 0x70, 0x69, 0x73, 0x6F, 0x6D], type: 'MP4' },
  { signature: [0x00, 0x00, 0x00, 0x20, 0x66, 0x74, 0x79, 0x70, 0x6D, 0x70, 0x34, 0x32], type: 'MP4' },
  { signature: [0x00, 0x00, 0x00, 0x1C, 0x66, 0x74, 0x79, 0x70, 0x6D, 0x70, 0x34, 0x32], type: 'MP4' },
  { signature: [0x52, 0x49, 0x46, 0x46], type: 'AVI' },
  { signature: [0x00, 0x00, 0x01, 0xBA], type: 'MPEG-1' },
  { signature: [0x00, 0x00, 0x01, 0xB3], type: 'MPEG-2' },
  { signature: [0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70], type: 'MOV' },
  { signature: [0x46, 0x4C, 0x56, 0x01], type: 'FLV' },
  { signature: [0x1A, 0x45, 0xDF, 0xA3], type: 'MKV/WebM' },
  { signature: [0x30, 0x26, 0xB2, 0x75], type: 'WMV' },
  { signature: [0x4F, 0x67, 0x67, 0x53], type: 'OGG' },
  { signature: [0x47], type: 'TS' },
  { signature: [0x00, 0x00, 0x00, 0x14, 0x66, 0x74, 0x79, 0x70], type: '3GP' },
  { signature: [0x2E, 0x52, 0x4D, 0x46], type: 'RMVB' },
]

const oherFileTypes = [
  { signature: [0x50, 0x4B, 0x03, 0x04], type: 'ZIP' },
  { signature: [0x52, 0x61, 0x72, 0x21, 0x1A, 0x07, 0x00], type: 'RAR' },
  { signature: [0x37, 0x7A, 0xBC, 0xAF], type: '7-Zip' },
  { signature: [0x25, 0x50, 0x44, 0x46], type: 'PDF' },
  { signature: [0x50, 0x4B, 0x03, 0x04, 0x31, 0x57, 0x52, 0x64], type: 'DOCX' },
  { signature: [0x50, 0x4B, 0x03, 0x04, 0x58, 0x53, 0x06, 0x00], type: 'XLSX' },
  { signature: [0x50, 0x4B, 0x03, 0x04, 0x50, 0x50, 0x54, 0x06], type: 'PPTX' },
]

const imageTypes = imageFileTypes.map(item => item.type)
const videoTypes = videoFileTypes.map(item => item.type)
const oherTypes = oherFileTypes.map(item => item.type)

一些簡(jiǎn)單用法

// 獲取對(duì)應(yīng)類型
const getType = (header: Uint8Array) => {
  const types = [...imageFileTypes, ...videoFileTypes, ...oherFileTypes]
  for (const type of types) {
    let match = true;
    for (let i = 0; i < type.signature.length; i++) {
      if (header[i] !== type.signature[i]) {
        match = false;
        break;
      }
    }
    if (match) {
      return type.type;
    }
  }

// 獲取權(quán)限并建議格式是否正確
const detectFileType = async (tempFilePath: string, judgeType: 'image' | 'video'): Promise<string> => {
  const arraybuffer = fs.readFileSync(tempFilePath) as ArrayBuffer

  if (Object.prototype.toString.call(arraybuffer) !== '[object ArrayBuffer]') return 'Unknown'

  const header = new Uint8Array(arraybuffer.slice(0, 12)); // 取出前12個(gè)字節(jié)作為頭部

  console.log(`文件頭部`, header.toString(), '16進(jìn)制', [...header].map(item => item.toString(16)).toString())

  const type = getType(header)

  switch(judgeType) {
    case 'image':
      if (!imageTypes.includes(type)) {
        uni.showToast({
          icon: 'none',
          title: `~~當(dāng)前文件真實(shí)類型可能是${type}~~，請(qǐng)確認(rèn)是否為圖片文件~~`
        })

        return new Promise((resolve) => {

          setTimeout(() =>{
            resolve(type)
          }, 2500)

        })
      }
      break

    case 'video':

      if (!videoTypes.includes(type)) {
        uni.showToast({
          icon: 'none',
          title: `~~當(dāng)前文件真實(shí)類型可能是${type}~~，請(qǐng)確認(rèn)是否為視頻文件~~`
        })

        return new Promise((resolve) => {

          setTimeout(() =>{
            resolve(type)
          }, 2500)

        })
      }
      break

    default:
  }

  return type
}

  return 'Unknown'
}

export default detectFileType