在JavaScript中，可以通过读取文件的二进制数据并检查文件的 “魔术数字”（magic number） 来确定文件类型。魔术数字是指文件开始部分的一组特定的字节序列，不同的文件类型会有不同的魔术数字。

JavaScript中实现

以下是一个简单的示例，展示如何使用FileReader API来读取文件的二进制数据，并基于前几个字节来判断文件类型：

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) {
    // 文件类型及其对应的魔术数字，下面这些魔术数字不保证准确
    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';
}

微信小程序中实现

那么如何在微信小程序里面如何实现类似的功能。

• 期初以为小程序里面是不能实现的，因为不知道Uint8Array在小程序里面有没有，经过验证有这个函数。
• 在小程序中使用fs.readFileSync(filePath)可以获得文件的ArrayBuffer，这样就能完美解决问题
  • filePath必须是小程序本地地址才行，不能使用网络地址
  • 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) {
    // 文件类型及其对应的魔术数字，下面这些魔术数字不保证准确
    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个字节作为头部

    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个字节作为头部

对于MP4格式的文件，其魔术数字（signature）通常以 ftyp 原子开始，后面跟着 isom 字符串。

这里的 ftyp 是一个原子（box），它定义了文件的兼容性品牌和版本。isom 表示该文件遵循 ISO 基础媒体文件格式（ISO Base Media File Format），这是 MP4 格式的标准基础。

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

相对准确一点的魔术数字

下面是相对全面和准确的魔术数字，及相关代码

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)

一些简单用法

// 获取对应类型
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;
    }
  }

// 获取权限并建议格式是否正确
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个字节作为头部

  console.log(`文件头部`, header.toString(), '16进制', [...header].map(item => item.toString(16)).toString())

  const type = getType(header)

  switch(judgeType) {
    case 'image':
      if (!imageTypes.includes(type)) {
        uni.showToast({
          icon: 'none',
          title: `~~当前文件真实类型可能是${type}~~，请确认是否为图片文件~~`
        })

        return new Promise((resolve) => {

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

        })
      }
      break

    case 'video':

      if (!videoTypes.includes(type)) {
        uni.showToast({
          icon: 'none',
          title: `~~当前文件真实类型可能是${type}~~，请确认是否为视频文件~~`
        })

        return new Promise((resolve) => {

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

        })
      }
      break

    default:
  }

  return type
}

  return 'Unknown'
}

export default detectFileType