如果判断上传的文件 是源文件,而不是修改后缀的文件

发布时间 2023-04-19 15:08:16作者: 10后程序员劝退师

封装一个公共函数,运用在 上传文件时使用

export const checkFileRealType = (file:any) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => {
      const buffer = new Uint8Array(reader.result as any)
      // console.log(buffer)
      const PNG_MAGIC_NUMBER = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]
      const JPG_JPEG_MAGIC_NUMBER = [0xFF, 0xD8, 0xFF]
      const GIF_MAGIC_NUMBER = [0x47, 0x49, 0x46, 0x38]
      const GLB_MAGIC_NUMBER = [0x67, 0x6C, 0x54, 0x46]
      const MP4_MAGIC_NUMBER = [0x66, 0x74, 0x79, 0x70]
      const WMV_MAGIC_NUMBER = [0x30, 0x26, 0xB2, 0x75, 0x8E, 0x66, 0xCF, 0x11, 0xA6, 0xD9, 0x00, 0xAA, 0x00, 0x62, 0xCE, 0x6C]
      const AIV_MAGIC_NUMBER = [0x52, 0x49, 0x46, 0x46]

      if ( 
        PNG_MAGIC_NUMBER.every( (header, index) =>  header === buffer[index] ) || 
        JPG_JPEG_MAGIC_NUMBER.every( (header, index) =>  header === buffer[index] ) || 
        GIF_MAGIC_NUMBER.every( (header, index) =>  header === buffer[index] ) ||
        GLB_MAGIC_NUMBER.every( (header, index) =>  header === buffer[index] ) ||
        MP4_MAGIC_NUMBER.every( (header, index) =>  header === buffer[index+4] ) ||
        WMV_MAGIC_NUMBER.every( (header, index) =>  header === buffer[index] ) ||
        AIV_MAGIC_NUMBER.every( (header, index) =>  header === buffer[index] )
      ){
        resolve('')
      } else {
        ElMessage.error('非法文件上传!')
        return false
      }
    }
    reader.onerror = () => {
      ElMessage.error('非法文件上传!')
      return false
    }
    reader.readAsArrayBuffer(file.slice(0, 8))
  })
}

以element-ui的 upload组件为例

在问案件上传回调中

beforeAvatarUpload:UploadProps['beforeUpload'] = async(rawFile)=>{

    await checkFileRealType(rawFile)
}

更多文件二进制编码 参考 官方地址  (二进制文件对比表)

 https://en.wikipedia.org/wiki/List_of_file_signatures