vue 根据文件后缀显示相应的类型图标

效果演示

//utils.js文件
// 判断文件类型
export function matchType(fileName) {
	console.log(fileName)
	//后缀获取
	let suffix = ''
	// 获取类型结果
	let result = ''
	try {
		let flieArr = fileName.split('.')
		suffix = flieArr[flieArr.length - 1]
	} catch (err) {
		suffix = ''
	}
	console.log(suffix,result)
	//fileName无后缀，返回
	if (!suffix) {
		result = false
		return result
	}
	// 图片格式
	let imgList = ["png", "jpg", "jpeg", "bmp", "gif", "wmf",'psd']
	//进行图片匹配
	result = imgList.some((item) => {

		return item == suffix.toLowerCase()
	})
	if (result) {
		result = 'image'
		return result
	}
	// 文本格式
	let txtList = ["txt"]
	//进行文本匹配
	result = txtList.some((item) => {

		return item == suffix.toLowerCase()
	})
	if (result) {
		result = 'txt'
		return result
	}
	// pdf格式
	let pdfList = ["pdf"]
	//进行pdf匹配
	result = pdfList.some((item) => {

		return item == suffix.toLowerCase()
	})
	if (result) {
		result = 'pdf'
		return result
	}
	// word格式
	let wordList = ["doc","docx"]
	//进行word匹配
	result = wordList.some((item) => {
	
		return item == suffix.toLowerCase()
	})
	if (result) {
		result = 'word'
		return result
	}
	// excel格式
	let excelList = ["xls","xlsx"]
	//进行excel匹配
	result = excelList.some((item) => {
	
		return item == suffix.toLowerCase()
	})
	if (result) {
		result = 'xlsx'
		return result
	}
	// video格式
	let videoList = ["mp4",'avi','3gp','flv','wmv','asf','mpeg','m4v','mov','f4v','rmvb','rm','vob']
	//进行video匹配
	result = videoList.some((item) => {
	
		return item == suffix.toLowerCase()
	})
	if (result) {
		result = 'video'
		return result
	}
	// 压缩包格式
	let zipList = ["zip",'rar','gz','tgz','bz2','z','tar']
	//进行压缩包匹配
	result = zipList.some((item) => {
	
		return item == suffix.toLowerCase()
	})
	if (result) {
		result = 'zip'
		return result
	}
	return result
}

<img :src="require('../../../../assets/images/'+matchTypeLogo+'.png')" alt="" width="30" />

import {matchType} from '@/utils/index.js'
//测试
this.fileName = '小猫成长日记.word'
this.matchTypeLogo = matchType(this.fileName) ? matchType(this.fileName) : 'wenjian'