js从完整路径中截取文件名和后缀，并且根据后缀添加类型图标

工作中遇到的截取文件名加后缀，写之后记录一下
先看一下效果

前面是我自己加的word图标和索引，我是用vue写的项目。从父组件里传来的对象是当前选中项的各项参数，watch监听该对象，当他变化时，添加各种参数到子组件中自己的数组里。先看下代码

    data(){
      return{
        delImg,
        excel,
        ppt,
        word,
        pdf,
        del,
        fileList:[],
      }
    },
    props: {
      applyInfo: {
        type: Object,
      }
    },

    watch:{
      //截取文件名称加后缀
      applyInfo(){
        if(this.applyInfo){
          let list = this.applyInfo.attachment.split(',')
          list.forEach(item =>{
            let type = item.split('.')[item.split('.').length - 1]
            if(type=='pdf'){
              this.fileList.push({imgUrl:this.pdf,nm:item.slice(item.indexOf('_') + 1), url: item})
            }else if(type=='doc'||type=='docx'){
              this.fileList.push({imgUrl:this.word,nm:item.slice(item.indexOf('_') + 1), url: item})
            }else if(type=='ppt'||type=='pptx'){
              this.fileList.push({imgUrl:this.ppt,nm:item.slice(item.indexOf('_') + 1), url: item})
            }else if(type=='xls'||type=='xlsx'){
              this.fileList.push({imgUrl:this.excel,nm:item.slice(item.indexOf('_') + 1), url: item})
            }
          })
        }
        console.log(this.fileList)//添加后的数组

      },
    },

data里定义的是一些常见的图标，和要用到的数组。
watch
如果有多条路径，之间是用‘，’隔开的，所以将其分割放入临时数组中，循环该数组，分割出后缀名并加以判断，在判断后，使用indexOf得到_后面的位置，取出该值就是我们想的到的文件名加后缀，然后将这些参数push进我们的数组中，并打印得到

得到我们所要的参数了，非常简单。
若果有问题可以留言，谢谢大家