专栏首页前端资源循环文件列表判断文件格式,并设置不同的图片作为图标

循环文件列表判断文件格式,并设置不同的图片作为图标

项目中遇到一个功能,详情页需要循环出上传的附件,但是附件的格式不是唯一,不同格式需要展示不同的图片做区分。

以 Vue 为例:定义一个文件列表,和一个方法,查找文件地址中是否有某一种格式, return 出对应图片的地址。

data: {
  fileList: [
    {
      fileUrl: '/static/file/cbubjbjk.doc',
      fileName: '我的简历.doc'
    },
    {
      fileUrl: '/static/file/dvvbnbgfn.docx',
      fileName: '2019简历.docx'
    },
    {
      fileUrl: '/static/file/vdbgfn.pdf',
      fileName: '最新简历.pdf'
    },
  ]
},
methods:{
  getFormat(url) { //判断格式
    if(url.search('.docx') !=-1 || url.search('.doc') != -1){
      return "../static/img/file-word.png"
    }else if(url.search('.pdf') != -1){
      return "../static/img/file-pdf.png"
    }else{
      return "../static/img/file-word.png"
    }
  },
}

HTML部分:循环出文件列表,并提取出文件中的格式,把图片地址定义给 img 标签。

<div id="app">
  <a :href="item.fileUrl" v-for="item in fileList">
    <img :src="getFormat(item.fileUrl)" alt="">
    <p>{{item.fileName}}</p>
  </a>
</div>

这样,就可以根据文件格式,显示不同的图片了。

我把这个小案例放在了我的 GitHub 上面,需要的可以点此访问

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS/jQuery获取不到动态添加的元素节点的解决方法

    今天写了一个添加图片的功能,要求右上角要有删除按钮,我使用 jQuery 动态添加的方式。

    德顺
  • 小程序学习笔记 数据绑定、条件渲染、模板引用(8.11)

    wx:for:在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

    德顺
  • 利用Canvas写一个图片灰度处理的小工具,附源码

    前两天放假在家没事,写了一个把彩色图片变成灰度(黑白)图片的小工具,“选择图片”确定会自动输出处理后的黑白图片。

    德顺
  • Spring Security技术栈开发企业级认证与授权(六)使用REST方式处理文件服务

    从浏览器访问http://localhost:8080/file/152445566433就可以将之前模拟上传的文件下载下来,其中链接后面的数字是文件的上传后的...

    itlemon
  • 人工稚能之sklearn数据降维

    机器学习模型拟合的输入数据往往是多维数据,这个维度可能会非常庞大。比如统计一篇文章中的单词频率,就可以把文章看成单词的向量。而单词的数量又是非常庞大,每个单词都...

    老钱
  • 塔观 | AI会全面超越人类吗?来看看352位AI专家的答案

    导读:如果听到有人预测人工智能(AI)何时会取代人类,你肯定会以为预测者不懂AI或是末世论者。但是现在,研究人员联合机器学习专家对这个问题开展了有史以来规模最...

    灯塔大数据
  • 人工智能未来简史2020年-2805年

    人工智能裁判开始全面取代人类裁判员,部分人类已经无法与AI竞争,无法找到工作岗位;人类进入无人驾驶时代,出行自由,驾驶证这一历史证件被纳入博物馆珍藏;由Spac...

    mixlab
  • nodejs配置https服务

    示例地址:https://tiaocaoer.com:18889/rr?page=1

    薛定喵君
  • 困扰数学家50年的问题,竟被博士小姐姐用一周业余时间解决了

    斯人已逝,但他留给了世界丰富的知识遗产,最知名的莫过于“生命游戏”,还有一个困扰数学界50年的难题“康威扭结”(Conway Knot)。

    量子位
  • Python2 和 Python3 中默

    最近在使用 Python3.4 做一些脚本实现,发现对于编码的处理上和 Python2.6 有很大的不同,就此机会把相关知识做个梳理,方便需要的时候查阅。

    py3study

扫码关注云+社区

领取腾讯云代金券