前端根据文件后缀名智能识别文件类型的实用函数

在日常的文件处理中,我们经常需要根据文件的后缀名来判断文件的类型,以便进行相应的处理。本文将介绍一个实用的 TypeScript 函数,它能够根据文件后缀名智能识别文件类型。

函数功能概述

matchFileType 函数接收一个文件名作为参数,通过提取文件后缀名并与预定义的文件类型进行匹配,返回对应的文件类型标识。如果无法匹配任何已知类型,则返回 'other';如果没有后缀名,则返回 false

TypeScript 复制代码
/**
 * 根据文件名后缀区分文件类型
 *
 * @param fileName - 文件名称
 * @returns 数据返回:
 *  1) 无后缀匹配 - false
 *  2) 匹配图片 - image
 *  3) 匹配 txt - txt
 *  4) 匹配 csv - csv
 *  5) 匹配 excel - excel
 *  6) 匹配 word - word
 *  7) 匹配 pdf - pdf
 *  8) 匹配 ppt - ppt
 *  9) 匹配视频 - video
 *  10) 匹配音频 - radio
 *  11) 其他匹配项 - other
 */
export function matchFileType(fileName: any) {
  // 后缀获取
  let suffix = '';
  // 获取类型结果
  let result = false;
  if (!fileName) return false;
  try {
    // 截取文件后缀
    suffix = fileName.substr(fileName.lastIndexOf('.') + 1, fileName.length);
    // 文件后缀转小写,方便匹配
    suffix = suffix.toLowerCase();
  } catch {
    suffix = '';
  }
  // fileName无后缀返回 false
  if (!suffix) {
    result = false;
    return result;
  }

  const fileTypeList = [
    // 图片类型
    { typeName: 'image', types: ['png', 'jpg', 'jpeg', 'bmp', 'gif'] },
    // 文本类型
    { typeName: 'txt', types: ['txt'] },
    // csv文本类型
    { typeName: 'csv', types: ['csv'] },
    // excel类型
    { typeName: 'excel', types: ['xls', 'xlsx'] },
    { typeName: 'word', types: ['doc', 'docx'] },
    { typeName: 'pdf', types: ['pdf'] },
    { typeName: 'ppt', types: ['ppt'] },
    // 视频类型
    { typeName: 'video', types: ['mp4', 'm2v', 'mkv'] },
    // 音频
    { typeName: 'radio', types: ['mp3', 'wav', 'wmv'] },
  ];
  
  for (const fileTypeItem of fileTypeList) {
    const typeName = fileTypeItem.typeName;
    const types = fileTypeItem.types;
    result = types.includes(suffix);
    if (result) {
      return typeName;
    }
  }
  return 'other';
}

返回值说明

函数返回以下值之一:

  • false:文件名无效或无后缀名

  • 'image':图片文件(png、jpg、jpeg、bmp、gif)

  • 'txt':文本文件(txt)

  • 'csv':CSV文件(csv)

  • 'excel':Excel文件(xls、xlsx)

  • 'word':Word文档(doc、docx)

  • 'pdf':PDF文档(pdf)

  • 'ppt':PPT文档(ppt)

  • 'video':视频文件(mp4、m2v、mkv)

  • 'radio':音频文件(mp3、wav、wmv)

  • 'other':其他未明确分类的文件类型

使用

path 为各种在线文件链接,尤其是对接上传文件组件返回的链接等

TypeScript 复制代码
 matchFileType(path?.split('?').shift())
相关推荐
Z兽兽6 小时前
React@18+Vite项目配置env文件
前端·react.js·前端框架
SuniaWang6 小时前
《Spring AI + 大模型全栈实战》学习手册系列 · 专题六:《Vue3 前端开发实战:打造企业级 RAG 问答界面》
java·前端·人工智能·spring boot·后端·spring·架构
A_nanda7 小时前
根据AI提示排查vue前端项目
前端·javascript·vue.js
happymaker06267 小时前
web前端学习日记——DAY05(定位、浮动、视频音频播放)
前端·学习·音视频
~无忧花开~8 小时前
React状态管理完全指南
开发语言·前端·javascript·react.js·前端框架
LegendNoTitle8 小时前
计算机三级等级考试 网络技术 选择题考点详细梳理
服务器·前端·经验分享·笔记·php
@大迁世界8 小时前
1.什么是 ReactJS?
前端·javascript·react.js·前端框架·ecmascript
BJ-Giser9 小时前
Cesium 基于EZ-Tree的植被效果
前端·可视化·cesium
王码码203510 小时前
Flutter for OpenHarmony:Flutter 三方库 algoliasearch 毫秒级云端搜索体验(云原生搜索引擎)
android·前端·git·flutter·搜索引擎·云原生·harmonyos
发现一只大呆瓜10 小时前
深入浅出 AST:解密 Vite、Babel编译的底层“黑盒”
前端·面试·vite