Vue+ElementUI实现文件照片音频视频预览

qq_42753983

已于 2024-04-29 21:01:40 修改

阅读量627

点赞数 1

文章标签： vue.js elementui javascript

于 2024-04-29 16:29:36 首次发布

本文链接：https://blog.csdn.net/qq_42753983/article/details/138317044

版权

1. 需求是点击预览按钮根据文件名的后缀去实现预览

2. 具体实现代码及逻辑

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;
      }
    },