如何智能判断url，根据文件url自动 显示 视频、图片、文档

[天涯姐妹清]

在做一个文件管理器，这个文件管理器里面有很多类型的文件，有图片、视频、pdf、word等等，怎么让它自动根据文件url动态显示图标或者内容呢? 类似电脑资源管理器这种效果

[雨天晴天]

如果url后面都有后缀的话，可以获取到url的后缀，然后根据后缀来判断显示不通的图标

核心代码

let url = 'xxx.jpg'

// 获取后缀
let suffix = this.src.substr(this.src.lastIndexOf('.') + 1)

// suffix =>  .jpg

简要demo（以vue组件为例）

<template>
<div class="media">
  <img v-if="type=='picture'" :src="src" alt="">
  <img v-if="type=='file'" src="@/assets/file.png" alt="">
  <video v-if="type=='video'" :src="src" alt=""></video>
  <audio v-if="type=='audio'" :src="src" alt=""></audio>
</div>
</template>
<script>
export default {
  props: {
    src: String
  },
  computed: {
    type() {
      let type = 'file'
      if (!this.src) return type
      let suffix = this.src.substr(this.src.lastIndexOf('.') + 1)

      switch (suffix.toLowerCase()) {
        // 图片
        case 'jpg':
        case 'jpeg':
        case 'gif':
        case 'png':
        case 'webp':
          type = 'picture'
          break
          // 视频
        case 'mp4':
        case 'mpeg4':
        case 'flv':
        case 'avi':
          type = 'video'
          break
          // 音频
        case 'mp3':
          type = 'audio'
          break
          // 其它文件
        default:
          type = 'file'
      }

      return suffix
    }
  }
}
</script>

<style lang="scss" scoped>
.media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15vw;
    height: 8vw;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
</style>