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



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

    f186114b-c00c-4a8f-b5e3-836517d3126d-image.png



  • 如果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>
    

Log in to reply