javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Vue ElementUI视频预览

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

作者:qq_42753983

这篇文章主要介绍了JavaScript代码实现微博批量取消关注功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

Vue+ElementUI实现文件照片音频视频预览功能,内容如下所示:

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

到此这篇关于Vue+ElementUI实现文件照片音频视频预览的文章就介绍到这了,更多相关Vue ElementUI视频预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文