Vue+ElementUI實(shí)現(xiàn)文件照片音頻視頻預(yù)覽功能

更新時間：2024年04月30日 11:36:02 作者：qq_42753983

這篇文章主要介紹了JavaScript代碼實(shí)現(xiàn)微博批量取消關(guān)注功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

Vue+ElementUI實(shí)現(xiàn)文件照片音頻視頻預(yù)覽功能，內(nèi)容如下所示：

1. 需求是點(diǎn)擊預(yù)覽按鈕根據(jù)文件名的后綴去實(shí)現(xiàn)預(yù)覽

2. 具體實(shí)現(xiàn)代碼及邏輯

1.預(yù)覽彈框
<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;
  },
  // 預(yù)覽會傳把這一行的文件名拿到 然后取到后綴名，根據(jù)后綴名進(jìn)行判斷
  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進(jìn)行編碼
        this.excelPreviewUrl = `https://view.officeapps.live.com/op/view.aspx?    
        src=${encodedFileUrl}`;
        // 顯示預(yù)覽
        this.isAudio = false;
        this.isVideo = false;
        this.isExcel = true;
        this.isImage = false;
      } else {
        this.previewUrl = val.materialUrl;
        // 顯示預(yù)覽
        this.isAudio = false;
        this.isVideo = false;
        this.isExcel = false;
        this.isImage = true;
      }
    },

到此這篇關(guān)于Vue+ElementUI實(shí)現(xiàn)文件照片音頻視頻預(yù)覽的文章就介紹到這了,更多相關(guān)Vue ElementUI視頻預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: