【FileShowCom 组件】文件预览：图片预览 el-image，其余文件预览打开新窗口或者下载

这里写目录标题

• [FileShowCom 组件代码](#FileShowCom 组件代码)
• 组件使用
• 页面展示

FileShowCom 组件代码

<template>
  <div class="file-show-com">
    <template v-for="(file, index) in fileList">
      <el-image
        v-if="isImage(file)"
        :key="'img-' + index"
        class="file-image"
        :src="getFileUrl(file)"
        :preview-src-list="[getFileUrl(file)]"
        fit="cover"
      >
        <div slot="error" class="image-error">
          <i class="el-icon-picture-outline" title="图片加载失败"></i>
        </div>
      </el-image>
      <el-link
        v-else
        :key="'link-' + index"
        type="primary"
        :href="getFileUrl(file)"
        :download="getFileName(file)"
        target="_blank"
      >
        <i class="el-icon-document"></i>
        {{ getFileName(file) }}
      </el-link>
      <span
        v-if="index < fileList.length - 1"
        :key="'separator-' + index"
        class="file-separator"
      ></span>
    </template>
  </div>
</template>

<script>
export default {
  name: 'FileShowCom',
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    fileNameField: {
      type: String,
      default: 'wjmc'
    },
    filePathField: {
      type: String,
      default: 'wjlj'
    },
    fileTypeField: {
      type: String,
      default: 'wjgs' // 文件格式不带点，例如：jpg，不是.jpg
    }
  },
  computed: {},
  methods: {
    isImage(file) {
      if (!file) return false
      let ext = null
      if (file[this.fileTypeField]) {
        ext = file[this.fileTypeField]
      } else {
        const url = typeof file === 'string' ? file : file[this.filePathField]
        const name = typeof file === 'string' ? file : file[this.fileNameField]
        if (!url && !name) return false
        const urlSplit = url.split('.')
        const nameSplit = name.split('.')
        if (urlSplit.length > 1) ext = urlSplit.pop().toLowerCase()
        else if (nameSplit.length > 1) ext = nameSplit.pop().toLowerCase()
      }
      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext)
    },
    getFileUrl(file) {
      return typeof file === 'string' ? file : file[this.filePathField]
    },
    getFileName(file) {
      if (!file) return ''
      if (typeof file === 'string') {
        return file.split('/').pop() || file
      }
      return (
        file[this.fileNameField] ||
        (file[this.filePathField] ? file[this.filePathField].split('/').pop() : '') ||
        ''
      )
    }
  }
}
</script>

<style scoped>
.file-show-com {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.file-image {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
}
.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 18px;
}
.file-separator {
  margin: 0 8px;
  color: #dcdfe6;
}
</style>

组件使用

<FileShowCom
   :file-list="[
    {
      wjmc: 'example.jpg',
      wjlj: 'https://images.dog.ceo/breeds/pembroke/n02113023_5362.jpg'
    },
    {
      wjmc: 'DOC.doc',
      wjlj: 'https://images.dog.ceo/breeds/pembroke/n02113023_5362.doc'
    },
    {
      wjmc: 'MP4.mp4',
      wjlj:
        'https://live-s3m.mediav.com/nativevideo/dec07f3b3b0953722b738ced98fe148d-bit_cloud768.mp4'
    },
    {
      wjmc: 'PDF.pdf',
      wjlj:
        'http://192.168.0.42:9000/oss/ajax/bucket/file/supervisecore/ACTIVITY/20260407/42mZWFifrYySXhPl+4H6Eg==.pdf'
    }
  ]"
/>

页面展示