vue 预览视频与pdf

没有用插件。最后的呈现是点击，将内容打开一个新页。

总体思路大概是，视频放video标签里，pdf放iframe里。
说完了哈哈哈哈哈哈哈哈哈哈

这次的需求是上传一个文件，限制文件为mp4和pdf，大小不超过500M。
上传文件是放在新增和修改的弹出框内，所以需要和新增修改一起完成。
emmm我的意思是，点击“上传文件”时，不调取接口，先完成本地文件的预览。等到确定新增和修改时，一起。

总体思路大概是，在上传的按钮下有一个容器，用v-if控制显隐；
里面还有俩容器，上传文件为视频时video，为pdf时为iframe。

效果图 👇 空状态 视频 pdf

代码说明： elementui自带的action我不会用。。每次都是给个占位符，最后使用http-request。accept为限制文件格式。show-file-list为显隐文件列表。。这个我也没用过。。我觉得它不好看哈哈哈哈哈哈哈哈哈哈
写的过程中发现iframe无法添加点击事件，我去百度。。就。。emmm.....很麻烦。。为了省事我加了一个容器，设置定位到iframe一样的位置，相当于我们看到的还是iframe爸特点击到的其实是那个隐形的容器~~

上代码 👇

           <el-upload
              class="upload-demo"
              action="#"
              :http-request="handleUpload"
              accept=".pdf, .mp4"
              :show-file-list="false"
            >
              <el-button size="mini" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传mp4/pdf文件，且不超过500k
              </div>
            </el-upload>
            <div class="preview-container" v-if="preview" @click="handlePlay">
              <video
                v-if="fileType === 'mp4'"
                alt="视频预览"
                width="100px"
                height="100px"
                :src="articleUrl"
              />
              <div class="pdf-container">
                <iframe
                  v-if="fileType === 'pdf'"
                  :src="articleUrl"
                  frameborder="0"
                ></iframe>
                <!-- 隐形的容器~~ -->
                <div class="frame-wrap"></div>
              </div>
            </div>

style ↓ 样式不对尼萌就自己再调调昂主要是看frame-wrap的~

.preview-container {
  margin-top: 20px;
  width: 100px;
  height: 100px;
}
.pdf-container {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.frame-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

script标签内的methods ↓ (endsWith('文件类型')是昨天才学到的一个获取文件类型的方法，会有一个boolean返回值)

    // 上传方法
    handleUpload(file) {
      if (file.file.size > 512000) {
        this.$message("文件最大500K");
        return;
      }
      this.file = file.file;
      // 两种显示的路径都设置成articleUrl。至此完成预览
      this.articleUrl = URL.createObjectURL(this.file);
      // let type = file.file.name.substr(-3);
      // ↑这句是知道endsWith之前获取文件类型的愚蠢方式哈哈哈哈哈哈
      
      // 页面中用fileType来判断容器的显隐
      file.file.name.endsWith("mp4")
        ? (this.fileType = "mp4")
        : (this.fileType = "pdf");
      this.preview = true;
    },
    // 打开新页呈现文件预览
    handlePlay() {
      window.open(this.articleUrl, "_blank");
    },

tada~_{视频及pdf的预览及查看就完成啦}