有关ant-designe-vue实现文件在线预览的代码

<template>
  <div>
    <a-upload
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      multiple
      :show-upload-list="false"
    >
      <a-button>
        <a-icon type="upload" /> 选择文件
      </a-button>
    </a-upload>
    <ul class="file-list">
      <li
        v-for="(file, index) in fileList"
        :key="file.uid"
        :class="{ active: activeIndex === index }"
        @click="previewFile(index)"
      >
        <a-icon :type="file.icon" />
        {{ file.name }}
      </li>
    </ul>
    <a-modal
      title="文件预览"
      :visible="previewVisible"
      @cancel="handleCancel"
      :footer="null"
      width="800px"
    >
      <template v-if="previewFileType === 'image'">
        <img :src="previewUrl" alt="预览图片" style="max-width: 100%" />
      </template>
      <template v-else-if="previewFileType === 'pdf'">
        <iframe
          :src="previewUrl + '#zoom=100'"
          frameborder="0"
          style="width: 100%; height: 500px;"
        />
      </template>
      <template v-else-if="previewFileType === 'video'">
        <video :src="previewUrl" controls style="max-width: 100%" />
      </template>
      <template v-else-if="previewFileType === 'audio'">
        <audio :src="previewUrl" controls style="max-width: 100%" />
      </template>
      <template v-else-if="previewFileType === 'text'">
        <pre>{{ previewText }}</pre>
      </template>
      <template v-else>
        <p>不支持该类型文件的预览！</p>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { Upload, Button, Icon, Modal } from 'ant-design-vue';

export default {
  components: {
    'a-upload': Upload,
    'a-button': Button,
    'a-icon': Icon,
    'a-modal': Modal,
  },
  data() {
    return {
      fileList: [],
      activeIndex: -1,
      previewVisible: false,
      previewUrl: '',
      previewFileType: '',
      previewText: '',
    };
  },
  methods: {
    beforeUpload(file) {
      const fileType = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
      let icon = '';
      if (fileType === 'jpg' || fileType === 'png' || fileType === 'gif') {
        icon = 'picture';
      } else if (fileType === 'pdf') {
        icon = 'file-pdf';
      } else if (fileType === 'mp4' || fileType === 'ogg' || fileType === 'webm') {
        icon = 'video-camera';
      } else if (fileType === 'wav' || fileType === 'mp3') {
        icon = 'customer-service';
      } else if (fileType === 'txt' || fileType === 'html' || fileType === 'css' || fileType === 'js' || fileType === 'json') {
        icon = 'file-text';
      } else {
        return false;
      }
      this.fileList.push({
        uid: file.uid,
        name: file.name,
        icon,
        type: fileType,
        url: URL.createObjectURL(file),
      });
      return false;
    },
    onSuccess() {
      // 上传成功后的回调
    },
    previewFile(index) {
      this.activeIndex = index;
      const file = this.fileList[index];
      this.previewFileType = '';
      this.previewUrl = '';
      this.previewText = '';
      if (file.type === 'jpg' || file.type === 'png' || file.type === 'gif') {
        this.previewFileType = 'image';
        this.previewUrl = file.url;
      } else if (file.type === 'pdf') {
        this.previewFileType = 'pdf';
        this.previewUrl = file.url;
      } else if (file.type === 'mp4' || file.type === 'ogg' || file.type === 'webm') {
        this.previewFileType = 'video';
        this.previewUrl = file.url;
      } else if (file.type === 'wav' || file.type === 'mp3') {
        this.previewFileType = 'audio';
        this.previewUrl = file.url;
      } else if (file.type === 'txt' || file.type === 'html' || file.type === 'css' || file.type === 'js' || file.type === 'json') {
        this.previewFileType = 'text';
        const xhr = new XMLHttpRequest();
        xhr.open('GET', file.url);
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              this.previewText = xhr.responseText;
            } else {
              this.previewText = '文件读取失败！';
            }
          }
        };
        xhr.send();
      }
      this.previewVisible = true;
    },
    handleCancel() {
      this.previewVisible = false;
      this.activeIndex = -1;
      this.previewUrl = '';
      this.previewFileType = '';
      this.previewText = '';
    },
  },
};
</script>

<style scoped>
.file-list {
  margin-top: 20px;
  padding-left: 0;
  list-style: none;
}

.file-list li {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.file-list li.active {
  background-color: #00a0e9;
  color: #fff;
}

.file-list li a-icon {
  font-size: 20px;
  margin-right: 5px;
}

.file-list li span {
  vertical-align: middle;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>