vue根据文件名后缀区分

1、建立公共的js matchType.js

// 根据文件名后缀区分 文件类型function getType(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;}export default {getType}

2、vue页面上调用

<template><div><divv-for="(item,index) in recordInfo":key="index"><video:src="recordInfo.beforeUrl"v-if="recordInfo.beforeType==='video'"controls="true"></video><el-imagelazy:src="recordInfo.beforeUrl"v-else:preview-src-list="[recordInfo.beforeUrl,]"></el-image></div></div>
</template><script>
export default {data() {return {imgSrc: '',recordInfo: []}},methods: {getRecords() {recordInfo().then((res) => {res.data.forEach((item) => {if (matchType.getType(item.beforeUrl) === 'image') {item.beforeType = 'image'} else if (matchType.getType(item.beforeUrl) === 'video') {item.beforeType = 'video'}})this.recordInfo = res.data})}}
}
</script><style>
</style>

vue根据文件名后缀区分相关推荐

vue项目中，js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法
vue项目中,在获得文件名信息,需要根据文件名的后缀来区分文件类型的方法如下:其中,文件后缀可自由拓展. // 根据文件名后缀区分文件类型/** @param: fileName - 文件名称* @ ...
[vue] 为什么我们写组件的时候可以写在.vue里呢？可以是别的文件名后缀吗？
[vue] 为什么我们写组件的时候可以写在.vue里呢?可以是别的文件名后缀吗? 也可以写为js,jsx,ts,tsx这种个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
vue cli3 一键 build 区分测试环境和正式环境
vue cli3 打包 build 区分测试环境和正式环境通过自定义环境变量文件进行配置思路: 默认情况下,执行 npm run serve 会以 development 的模式启动执行 npm ...
find命令及文件名后缀
1. find命令常见的搜索命令有:which.whereis.locate.find. locate命令可以通过"yum install -y mlocate"来安装,如果在安 ...
linux命令拉取windows的文件,find命令、文件名后缀以及Linux和Windows互传文件(示例代码)...
find命令文件查找: 1.which(一般用于查找命令的绝对路径) 2.whereis(不常用) 3.locate(非实时查找,基于预先定义的数据库.模糊查找,查找速度快.使用前要先安装这个命令y ...
find命令文件名后缀
find命令 1.查看当前目录下以.txt结尾的文件 [root@test ~]# find . -name "*.txt" ./.subversion/README.txt . ...
shell字符串切割去除文件名后缀
shell字符串切割,去除文件名后缀去除文件名后缀
Vue打包文件名、默认文件名操作
Vue打包文件名.默认文件名操作问题: 因为我想在我的服务器上部署两个vue项目,但是vue打包后默认的项目名是dist,这样子就跟我上一个vue项目冲突了. 解决办法: 进入config ⇒ in ...
如何批量将文件名后缀加1、2、3不带括号
我是去年开始做自媒体运营,其中很火的一个方向是影视剪辑.相信做的朋友都知道,先从素材网站下载影视剧,然后自己剪辑和配音添加文件,形成新的属于自己风格的影视作品.做的早的朋友,粉丝数和收益都是很可观的. ...
win 显示文件名后缀属性
win 显示文件名后缀属性提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生 ...

vue根据文件名后缀区分

vue根据文件名后缀区分相关推荐

最新文章

热门文章