Navigation

    云、贵、川、渝IT人的圈子
    • Register
    • Login
    • Search
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 招聘
    • 活动
    • 项目

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

    技术答疑
    2
    2
    16
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • 天
      天涯姐妹清 last edited by

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

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

      1 Reply Last reply Reply Quote 0
      • 雨
        雨天晴天 last edited by 雨天晴天

        如果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>
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post
        天
        雨
        8
        玻
        U
        A
        大
        A
        青
        黑
        低
        天
        白
        快
        爱
        白
        美
        此
        荒
        为
        哭
        柳
        无
        真

        社群
        昆明网页设计交流吧
        友情链接
        • Funtask
        • Funtask 社区
        • SUWIS
        • 云南北大青鸟
        ©2019-2020 滇ICP备20006698号