w3h5

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

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

以 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>

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

file.png 循环文件列表判断文件格式,并设置不同的图片作为图标 经验总结

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

声明:本文由w3h5原创,转载请注明出处:《循环文件列表判断文件格式,并设置不同的图片作为图标》 https://www.w3h5.com/post/466.html

赞 (0)
分享到: +More |

评论 沙发

换个身份