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无后缀返回 false
        if (!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;
        };
        // 匹配txt
        var txtlist = ['txt'];
        result = txtlist.some(function (item) {
          return item == suffix;
        });
        if (result) {
          result = 'txt';
          return result;
        };
        // 匹配 excel
        var excelist = ['xls', 'xlsx'];
        result = excelist.some(function (item) {
          return item == suffix;
        });
        if (result) {
          result = 'excel';
          return result;
        };
        // 匹配 word
        var wordlist = ['doc', 'docx'];
        result = wordlist.some(function (item) {
          return item == suffix;
        });
        if (result) {
          result = 'word';
          return result;
        };
        // 匹配 pdf
        var pdflist = ['pdf'];
        result = pdflist.some(function (item) {
          return item == suffix;
        });
        if (result) {
          result = 'pdf';
          return result;
        };
        // 匹配 ppt
        var 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>
    <div
      v-for="(item,index) in recordInfo"
      :key="index"
    >
      <video
        :src="recordInfo.beforeUrl"
        v-if="recordInfo.beforeType==='video'"
        controls="true"
      ></video>
      <el-image
        lazy
        :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>