西南IT社区
    • 注册
    • 登录
    • 搜索
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 工作机会
    • 活动
    • 项目

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

    技术答疑
    2
    2
    131
    正在加载更多帖子
    • 从旧到新
    • 从新到旧
    • 最多赞同
    回复
    • 在新帖中回复
    登录后回复
    此主题已被删除。只有拥有主题管理权限的用户可以查看。
    • 天
      天涯姐妹清 最后由 编辑

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

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

      1 条回复 最后回复 回复 引用 0
      • 雨
        雨天晴天 最后由 雨天晴天 编辑

        如果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 条回复 最后回复 回复 引用 0
        • First post
          Last post
        使用HTML构建办公软件 使用HTML构建办公软件 使用HTML构建办公软件
        天
        雨
        工
        H
        Z
        西
        T
        J
        J
        M
        E
        I
        F
        漫
        成
        Y
        洋
        书
        Y
        D
        U
        Y
        娇
        玩
        1
        光

        西南地区IT社群(QQ)
        云南
        【昆明网页设计交流吧】243627302
        【昆明nodejs交流吧】 243626749
        【VUE】838405306
        【云南程序员总群】343606807
        【昆明UI设计】104031254
        【云南软件外包】15547313
        贵州
        【PHP/java源码/站长交流群】55692114
        四川
        【成都Java/JavaWeb交流】86669225
        【vaScript+PHP+MySql】116270060
        【UI设计/设计交流学习群】135794928
        重庆
        【诺基亚 JAVA游戏博物馆】 559479780
        【PHP,Java,Python,C++接单】 442103442
        西藏
        社群
        昆明网页设计交流吧
        友情链接
        • Funtask
        • Funtask 社区
        • SUWIS
        ©2019-2021 滇ICP备20006698号