vue element上传图片、pdf、word文件，图片可以预

需求是，上传的是图片就显示图片，上传的是pdf就显示对应的icon图片。使用的是vscode-material-icon-theme-js

1. 组件，需安装 npm install vscode-material-icon-theme-js

<template>
  <img
    :src="iconPath"
    :style="{
      width: size,
      height: size
    }"
  >
</template>

<script>
import { getIconForFile } from 'vscode-material-icon-theme-js'

export default {
  props: {
    filename: {
      type: String,
      default: ''
    },
    extension: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '20px'
    }
  },
  computed: {
    ext() {
      const ext = this.extension || ''
      const name = ext ? `.${ext}` : ''
      return name
    },
    icon() {
      if (this.filename) {
        return getIconForFile(this.filename)
      } else {
        return getIconForFile(this.ext)
      }
    },
    iconPath() {
      return require(`material-icon-theme/icons/${this.icon}`)
    }
  }
}
</script>

<style lang="scss">
img {
    display: inline-block;
    font-size: 0 !important;
    line-height: 0 !important;
    vertical-align: middle;
}
</style>

2. 使用

<template>
<div v-for="(item, idx) in packDatas" :key="idx"  >
        <img v-if="isImage(item.url)" :src="item.url">
        <FileIcon v-else :filename="item.url" size="60px" />
 </div>
</template>

<script>
import FileIcon from '@/components/FileIcon'

export default {
  components: { FileIcon },
  data(){
     return {
          packDatas:[{url:'jjjj.pdf'}]
      }
  },
method:{
     isImage(filename) {
      return (/\.(gif|jpe?g|tiff?|png|webp|bmp)$/i).test(filename)
    }
}

}
</script>