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根据文件名后缀区分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。