Vue项目中的万能图片、视频、文档、PDF加载器

2022-12-20 17:50:05

动态加载不同类型文件，提升 Vue 项目交互体验

在 Vue 项目中，灵活高效地加载各类文件（如图片、视频、文档和 PDF）至关重要。本文将详细介绍如何根据文件后缀判断其类型，并根据不同类型动态展示内容。

1. 后缀判断类型

第一步，我们需要根据文件的后缀判断其类型。代码示例如下：

function getFileType(fileName) {
  const fileExtension = fileName.split('.').pop();
  switch (fileExtension) {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'gif':
      return 'image';
    case 'mp4':
    case 'webm':
    case 'ogg':
      return 'video';
    case 'pdf':
      return 'pdf';
    case 'doc':
    case 'docx':
      return 'document';
    default:
      return 'other';
  }
}

2. 根据类型动态加载

接下来，我们根据获取的文件类型，动态加载不同类型的文件。例如，对于一张图片，我们可以使用以下代码：

<template>
  <div>
    <img :src="imageUrl" alt="图片">
  </div>
</template>

<script>
import { getFileType } from './utils.js';

export default {
  data() {
    return {
      imageUrl: null,
    };
  },
  created() {
    this.imageUrl = this.getFileName();
  },
  methods: {
    getFileName() {
      const fileType = getFileType('image.jpg');
      return fileType + '.' + 'jpg';
    },
  },
};
</script>

3. 灵活展示不同内容

通过获取文件后缀并判断类型，我们还可以灵活展示不同类型的内容。例如，我们可以创建如下组件：

<template>
  <div>
    <component :is="componentType" :src="fileUrl" alt="文件"></component>
  </div>
</template>

<script>
import { getFileType } from './utils.js';

export default {
  data() {
    return {
      fileUrl: null,
      componentType: null,
    };
  },
  created() {
    this.fileUrl = this.getFileUrl();
    this.componentType = this.getComponentType();
  },
  methods: {
    getFileUrl() {
      return 'image.jpg';
    },
    getComponentType() {
      const fileType = getFileType('image.jpg');
      switch (fileType) {
        case 'image':
          return 'ImageComponent';
        case 'video':
          return 'VideoComponent';
        case 'pdf':
          return 'PdfComponent';
        case 'document':
          return 'DocumentComponent';
        default:
          return 'OtherComponent';
      }
    },
  },
};
</script>