如何智能判断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>
西南地区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
- 西藏