根据文件后缀名显示对应类型缩略图

功能需求

根据后台接口返回数据中的文件路径区分文件类型，并将对应的图标（缩略图）显示在文件名称前

* 缩略图需保存在项目中，下例使用到的svg如下（excel、txt、word）

• excel：

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1622809672937" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="90241" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M919.0912 205.44V963.072a51.2 51.2 0 0 1-51.2 51.2h-619.52A125.3632 125.3632 0 0 1 122.88 889.088V51.2a51.2 51.2 0 0 1 51.2-51.2h528.6912l216.32 205.44z" fill="#0AC798" p-id="90242"></path><path d="M913.7152 211.2256h-216.32V5.7856z" fill="#A1EDDA" p-id="90243"></path><path d="M461.952 634.88l60.288-90.4448 60.288 90.4448h46.848l-84.1984-120.9088 78.976-113.0496h-46.848L522.24 483.4816l-55.04-82.56h-46.848l78.2848 113.0496-83.5584 120.9088z" fill="#FFFFFF" p-id="90244"></path></svg>

•  txt:

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1622809699640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="91782" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M921.813333 227.157333L749.781333 58.88 732.928 42.666667H173.013333C125.866667 42.666667 85.333333 78.250667 85.333333 126.805333v770.389334C85.333333 942.506667 122.453333 981.333333 173.013333 981.333333h677.973334C898.133333 981.333333 938.666667 945.749333 938.666667 897.194667V243.328l-16.853334-16.170667z" fill="#85A9C7" p-id="91783"></path><path d="M374.741333 623.445333H313.514667v188.373334c0 7.466667-5.546667 13.056-14.848 13.056a12.714667 12.714667 0 0 1-12.970667-13.056v-188.373334H224.426667c-5.546667 0-11.136-3.712-11.136-11.178666 0-7.466667 5.546667-13.056 11.093333-13.056h150.314667c5.546667 0 11.093333 5.546667 11.093333 13.056 0 7.466667-5.546667 11.178667-11.093333 11.178666z m217.045334 201.429334c-5.546667 0-9.301333 0-11.136-3.712L512 727.893333l-70.485333 93.269334c-1.877333 3.712-5.546667 3.712-9.301334 3.712a12.714667 12.714667 0 0 1-12.970666-13.056c0-1.834667 0-5.546667 1.877333-7.466667l72.32-95.104L426.666667 617.856c-1.834667-1.877333-1.834667-3.754667-1.834667-7.466667 0-5.589333 3.669333-13.056 12.970667-13.056 3.712 0 7.424 1.877333 11.093333 5.589334L512 688.725333l63.061333-85.76c3.712-3.754667 7.424-5.632 11.136-5.632 7.424 0 12.970667 5.589333 12.970667 13.056 0 3.712 0 5.589333-1.834667 7.466667l-66.773333 89.514667 72.32 96.981333c0 1.877333 1.877333 5.632 1.877333 7.466667 0 7.466667-5.546667 13.056-12.970666 13.056z m207.786666-201.429334h-61.269333v188.373334c0 7.466667-5.546667 13.056-14.805333 13.056a12.714667 12.714667 0 0 1-13.013334-13.056v-188.373334h-61.226666c-5.546667 0-11.093333-3.712-11.093334-11.178666 0-7.466667 5.546667-13.056 11.093334-13.056h150.272c5.546667 0 11.136 5.546667 11.136 13.056 0 7.466667-5.546667 11.178667-11.093334 11.178666z" fill="#FFFFFF" p-id="91784"></path><path d="M800.853333 240.426667l138.368 3.072L732.202667 42.154667l-0.170667 129.450666c0 37.845333 30.933333 68.821333 68.821333 68.821334z" fill="#FFFFFF" opacity=".565" p-id="91785"></path></svg>

• word:

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1622809642143" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="88472" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M160 32a46.0288 46.0288 0 0 0-33.5872 14.3872 50.944 50.944 0 0 0-14.3872 33.5872v864c0 12.032 4.7616 24.832 14.336 33.6384a47.4112 47.4112 0 0 0 33.6384 14.3872h704a46.0288 46.0288 0 0 0 33.5872-14.3872 47.4112 47.4112 0 0 0 14.4384-33.6384v-640L640 32H160z" fill="#6CCBFF" p-id="88473"></path><path d="M912.0256 304.0256h-224a46.0288 46.0288 0 0 1-33.6384-14.4384A46.08 46.08 0 0 1 640 256V32l272.0256 272.0256z" fill="#C4EAFF" p-id="88474"></path><path d="M280.0128 385.5872h64.768L409.6 629.6064h0.8192l71.168-244.0192h62.4128l71.9872 244.0192 65.5872-244.0192h62.464l-96.0512 314.4192H583.168L512 458.3424h-0.8192l-71.9872 240.8448H374.4256z" fill="#FFFFFF" p-id="88475"></path></svg>

实现效果

代码片段

HTML：（以下为项目中截取的部分代码）

      <div class="item" v-for="(item, index) in dataList" :key="index">
        <div class="flex itemsCenter justifyBetween">
          <svg-icon v-if="isFileType(item.fileUrl)=='excle'" icon-class="excle"/>
          <svg-icon v-if="isFileType(item.fileUrl)=='text'" icon-class="text"/>
          <svg-icon v-if="isFileType(item.fileUrl)=='word'" icon-class="word"/>
          <div class="info">
            {{item.fileUrl.substring(item.fileUrl.lastIndexOf('/')+1)}}
          </div>
        </div>
      </div>

JavaScript： 

<script>
import {getMarketContentList} from '@/api/marketing'
export default {
  name: 'right',
  data(){
    return{
      dataList:[],
  },
  components: {
  },
  created () {
    this.getMarketContentList()
  },
  methods: {
    isFileType(type){
      //根据路径后缀判断文件类型
      let str = ''
      var index = type.lastIndexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
      str = type.substring(index); //截断"."之前的，得到后缀
      if(this.isImage(type)) return 'image'
      if(this.isXsls(str)) return 'excle'
      if(type == 'pfd') return 'pfd'
      if(this.isDocx(str)) return 'word'
      if(this.isText(str)) return "text"
      if(this.isVideo(str)) return "video"
    },
    isImage(type){
        return ['.png','.jpg','.jpeg','.gif','.svg'].includes(type.toLowerCase());
	},
    isDocx(type){
      return ['.doc','.docx'].includes(type.toLowerCase());
    },
    isXsls(type){
      return ['.xlsx','.xls'].includes(type.toLowerCase());
    },
    isText(type){
      return ['.text','.txt'].includes(type.toLowerCase());
    },
    isVideo(type){
      return ['.mp4','.rmvb','.avi','.ts'].includes(type.toLowerCase());
    },
    getMarketContentList(){
        let item1 = {
            contentID: 1,
            contentName: "doc测试",
            createTime: "2021-07-01 10:12:46",
            creator: "张三",
            fileName: "111",
            fileUrl : "http://****/tempmaterial/2021/07/文档测试.doc"
            }
          let item2 = {
            contentID: 2
            contentName: "txt测试",
            createTime: "2021-07-01 10:12:46",
            creator: "李四",
            fileName: "222",
            fileUrl : "http://****/tempmaterial/2021/07/文本测试.txt"
            }
          let item3 = {
            contentID: 3,
            contentName: "excle测试",
            createTime: "2021-07-01 10:12:46",
            creator: "王五",
            fileName: "333",
            fileUrl : "http://****/tempmaterial/2021/07/excle测试.xls"
            }
          this.dataList.push(item1)
          this.dataList.push(item2)
          this.dataList.push(item3)
    },
  }
}
</script>

样式：（仅供参考）

<style lang="scss" scoped>
.right-content{
  .top{
    padding: 0.1rem;
    box-shadow: 0 0.03rem 0.03rem $borderColor;
    .el-input{
      width: 1.8rem
    }
  }
  .title{
    display: inline-block;
    padding-right: 0.2rem;
    white-space: nowrap;
  }
}
.content-list{
  height: calc(100vh - 0.5rem);
  overflow: auto;
  padding: 0 0.1rem 0.1rem 0.1rem;
  box-sizing: border-box;
  &.nesting{
    height: calc(100vh - 1rem);
  }
  .item{
    border: 0.01rem solid $borderColor;
    padding: 0.1rem;
    margin-top: 0.1rem;
    border-radius: 0.04rem;
    box-shadow: 0 0 0.05rem $borderColor;
    img{
      width: 0.5rem;
      height: 0.5rem;
      margin-right: 0.1rem;
    }
    .info{
      width: 2rem;
    }
    .item-title{
      font-size: 0.14rem;
    }
    .time{
      margin-top: 0.04rem;
      font-size: 0.12rem;
      color: $gray;
    }
    .btns{
      margin-top: 0.1rem;
    }
  }
  .video{
    background-color: $borderColor;
    border-radius: 0.04rem;
    width: 0.5rem;
      height: 0.5rem;
    // width: 100%;
    // height: 1rem;
    object-fit: contain;
  }
}
</style>