vue项目中，js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法

vue项目中，在获得文件名信息，需要根据文件名的后缀来区分文件类型的方法如下：其中，文件后缀可自由拓展。

// 根据文件名后缀区分 文件类型/** @param: fileName - 文件名称* @param: 数据返回 1) 无后缀匹配 - false* @param: 数据返回 2) 匹配图片 - image* @param: 数据返回 3) 匹配 txt - txt* @param: 数据返回 4) 匹配 excel - excel* @param: 数据返回 5) 匹配 word - word* @param: 数据返回 6) 匹配 pdf - pdf* @param: 数据返回 7) 匹配 ppt - ppt* @param: 数据返回 8) 匹配 视频 - video* @param: 数据返回 9) 匹配 音频 - radio* @param: 数据返回 10) 其他匹配项 - other*/matchType(fileName) {// 后缀获取var suffix = '';// 获取类型结果var result = '';try {var flieArr = fileName.split('.');suffix = flieArr[flieArr.length - 1];} catch (err) {suffix = '';}// fileName无后缀返回 falseif (!suffix) {result = false;return result;}// 图片格式var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];// 进行图片匹配result = imglist.some(function (item) {return item == suffix;});if (result) {result = 'image';return result;};// 匹配txtvar txtlist = ['txt'];result = txtlist.some(function (item) {return item == suffix;});if (result) {result = 'txt';return result;};// 匹配 excelvar excelist = ['xls', 'xlsx'];result = excelist.some(function (item) {return item == suffix;});if (result) {result = 'excel';return result;};// 匹配 wordvar wordlist = ['doc', 'docx'];result = wordlist.some(function (item) {return item == suffix;});if (result) {result = 'word';return result;};// 匹配 pdfvar pdflist = ['pdf'];result = pdflist.some(function (item) {return item == suffix;});if (result) {result = 'pdf';return result;};// 匹配 pptvar pptlist = ['ppt'];result = pptlist.some(function (item) {return item == suffix;});if (result) {result = 'ppt';return result;};// 匹配 视频var videolist = ['mp4', 'm2v', 'mkv'];result = videolist.some(function (item) {return item == suffix;});if (result) {result = 'video';return result;};// 匹配 音频var radiolist = ['mp3', 'wav', 'wmv'];result = radiolist.some(function (item) {return item == suffix;});if (result) {result = 'radio';return result;}// 其他 文件类型result = 'other';return result;},

在项目中进行调用，只需要在需要使用的地方使用：

this.matchType('demo.png'); // 返回的结果为 'image'

根据返回结果可做对应操作。

vue项目中，js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法相关推荐

Vue项目中使用海康安全生产平台播放监控视频
最近一直在做有关海康监控视频的项目,闲下来写下这篇文章,加深一下印象,同时也和大家交流一下经验,以便更好提升自己.废话不多说,开始正题.... 首先把海康插件引进到项目中来然后在index.html ...
vue项目实现打印预览、生成（导出）文档功能
这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,但一直没时间,今天总算闲了一点,趁一大早活还没找上门来,赶紧抓住时间鸭! 1.打印预览打印预览说白就是实现快速跳转新页面预览信息 ...
Vue项目中TS引入多个.svg文件的总结
背景: Vue-CLI创建的项目,想要用自定义的icon,icon是在阿里icon-font下载的svg文件,直接使用import xxx from '@/assets/icons/xxx.svg'T ...
vue项目中的跑马灯的使用
在vue项目中,你会发现你的图片无法显示,在这我bia出来我的写法. <el-carousel trigger="click" height="150px" ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
vue 项目中使用three.js实现vr360度全景图片预览
vue 项目中使用three.js实现vr360度全景图片预览当前demo使用的three.js为0.115.0版本项目中安装three npm install three 安装完成再组件如下导入 ...

vue项目中，js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法

vue项目中，js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法相关推荐

最新文章

热门文章