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

德顺

发布于 2020-01-14 14:37:50

8710

发布于 2020-01-14 14:37:50

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

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

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