Vue结合ElementUI实现文件、图片、音频及视频预览

作者：青山有信时间：2026-10-24 07:45:02浏览：81

本文介绍如何在Vue项目中利用ElementUI组件实现文件预览功能。通过监听文件名后缀判断文件类型，动态渲染audio或video标签，支持图片、音频和视频格式的在线预览，并提供完整的代码逻辑与实现细节。

Vue ElementUI 文件预览功能概述

在Vue框架结合ElementUI组件库的开发场景中，实现文件、图片、音频和视频的在线预览功能是一项常见需求。具体的实现方案如下所述。

预览逻辑与文件类型识别

核心需求在于：当用户点击预览按钮时，系统需根据上传文件的后缀名自动识别文件类型，并调用相应的预览逻辑进行处理。

核心代码实现与逻辑解析

以下是具体的代码实现细节及业务逻辑说明。

1.预览弹框
<el-dialog
   :visible.sync="visibleFile"
   width="40%"
   :close-on-click-modal="false"
   @close="cancelHandler"
   :append-to-body="true">
    <audio
      style="
        width: 100%;
        height: 100px;
        padding: 30px;
        margin-top: 10px;
      "
      v-if="isVideo"
      controls
      :src="previewUrl"
    ></audio>
    <video
      style="padding: 20px; margin-top: 20px"
      v-if="isAudio"
      width="100%"
      height="600"
      controls
      :src="previewUrl"
    ></video>
    <iframe
      v-if="isExcel"
      :src="excelPreviewUrl"
      frameborder="0"
      width="100%"
      height="600"
    >
    </iframe>
    <div
      style="
        width: 100%;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
      "
      v-if="isImage"
    >
      <img
        class="previewImg"
        :src="previewUrl"
        alt=""
        style="max-width: 100%; max-height: 700px"
      />
    </div>
</el-dialog>
2.data定义
  isAudio: false, //视频
  isVideo: false, //音频
  isImage: false, //照片
  isExcel: false, //文件
  excelPreviewUrl: "", //文件地址
  previewUrl: "", //视频、音频、照片、文件地址
3.methods
  cancelHandler() {
    this.visibleFile = false;
  },
  // 预览会传把这一行的文件名拿到 然后取到后缀名，根据后缀名进行判断
  previewHandle(val) {
      this.visibleFile = true;
      if (val.fileExtension == "mp3") {
        this.previewUrl = val.materialUrl;
        this.isVideo = true;
        this.isAudio = false;
        this.isExcel = false;
        this.isImage = false;
      } else if (val.fileExtension == "mp4") {
        this.previewUrl = val.materialUrl;
        this.isAudio = true;
        this.isVideo = false;
        this.isExcel = false;
        this.isImage = false;
      } else if (val.fileExtension == "xlsx" || val.fileExtension == "xls") {
        const encodedFileUrl = encodeURIComponent(val.materialUrl); // 对文件URL进行编码
        this.excelPreviewUrl = `https://view.officeapps.live.com/op/view.aspx?    
        src=${encodedFileUrl}`;
        // 显示预览
        this.isAudio = false;
        this.isVideo = false;
        this.isExcel = true;
        this.isImage = false;
      } else {
        this.previewUrl = val.materialUrl;
        // 显示预览
        this.isAudio = false;
        this.isVideo = false;
        this.isExcel = false;
        this.isImage = true;
      }
    },