vue 根据文件格式显示不同的图标

1.新建commonUtil.js（匹配后缀的方法）

//匹配文件后缀
export function matchFileSuffixType(fileName) {// 后缀获取var suffix = ''// 获取类型结果var result = ''try {var flieArr = fileName.split('.')suffix = flieArr[flieArr.length - 1]} catch (err) {suffix = ''}// fileName无后缀返回 falseif (!suffix) {result = falsereturn result}// 图片格式var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif','tif','tiff']// 进行图片匹配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}// 匹配xmlvar txtlist = ['xml']result = txtlist.some(function (item) {return item == suffix})if (result) {result = 'xml'return result}// 匹配 office文件var officelist = ['doc','docx','pdf','xls','xlsx','ppt']result = officelist.some(function (item) {return item == suffix})if (result) {result = 'office'return result}// 匹配代码文件var officelist = ['java','php','py','js','css']result = officelist.some(function (item) {return item == suffix})if (result) {result = 'code'return result}// 匹配压缩文件var officelist = ['zip','rar','jar','tar','gzip']result = officelist.some(function (item) {return item == suffix})if (result) {result = 'zip'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}

2.页面中引入

import {matchFileSuffixType} from '@/components/common/commonUtil.js'

3.在js中使用

methods: {suffixFn(fileName){let suffix = matchFileSuffixType(fileName)  //fileName 文件名 console.log(suffix)}
}

4.在html中使用

methods:{matchFileSuffixType
}

<img :src="require(`../../assets/images/fileIcons/${matchFileSuffixType(item.fileName)}.png`)"/>
<!-- 图片名称如：zip.png   code.png -->

效果如下

vue 根据文件格式显示不同的图标相关推荐

在Vue中使用svg格式字体图标
在Vue中使用svg格式字体图标 1.新建一条分支,在新分支上修改,测试无误后合并到开发分支(建议) 2.先安装svg-sprite-loader ( 在打包时处理svg格式并展示到项目中的过滤器 ...
vue实现密码显示隐藏、很简单易懂
效果: 思路: 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码: 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制, ...
计算机文件无法显示后缀,但一般情况下电脑默认是看不到文件格式显示(也就是文件扩展名)...
我们都知道Powerpoint的文件是PPT格式的,但其实不然,有时为了让对方直接播放会保存为PPS文件,这样当双击PPS文件的时候就会直接播放了,所以这也使得有些人无法打开PPS文件进行编辑,这不今 ...
如何用openweather显示html,如何显示openweathermap天气图标
我正在使用openweathermap来显示天气报告.一切工作正常,但图标有问题. JSON响应代码是:如何显示openweathermap天气图标 Array ( [city] => Arra ...
在Winform的DataGridView的单元格中同时显示文本和图标，以及树形结构的示例
树形结构的DataGridView:Customizing the DataGridView to support expanding/collapsing (ala TreeGridView) ...
java 任务栏程序_如何在任务栏显示java程序图标
该代码实现了在系统右下角的任务栏中显示程序的图标,并且最小化程序后单击图标可以显示出来这个程序窗口 import java.awt.Color; import java.awt.Image; impo ...
win11如何显示所有应用图标 Windows11显示所有应用图标的设置方法
现在很多用户都应该安装了Win11系统了吧,但是有许多用户针对Windows11的不显示所有图标有点难受,想设置不知道从哪里设置,显示所有图标的方法和Win10有所不同,下面小编就教大家显示所有图标的 ...
cursor: not-allowed; readonly的升级版，鼠标经过时，显示为禁止图标
cursor: not-allowed; readonly的升级版,鼠标经过时,显示为禁止图标
win10如何显示html文件夹,Win10显示隐藏文件夹图标_Win10查看隐藏文件夹方法-192路由网...
问:Win10怎么显示隐藏文件夹图标?Win10电脑上如何查看隐藏文件夹?本人电脑用的是Windows 10操作系统,之前在Win10电脑上把一些文件.文件夹隐藏起来了. 现在想要查看Win10电脑中 ...

vue 根据文件格式显示不同的图标

vue 根据文件格式显示不同的图标相关推荐

最新文章

热门文章