vue+es 预览文件（视频、音频、文件、图片等格式）

一、音频解释：代码：<body><audio src="../mp3/aa.mp3" controls></audio></body>//controls：属性；显示音乐控制器，如下图：二、视频解释：代码：<body><video src="../mp3/bb.mp4" c...

我就是DaLing呀！

2888人浏览 · 2019-05-05 17:41:37

我就是DaLing呀！ · 2019-05-05 17:41:37 发布

如果不是想看基础就直接翻到：2021.07.19更新看实现业务

一、音频

解释：

代码：

<body>
<audio src="../mp3/aa.mp3" controls></audio>  
</body>

//controls：属性；显示音乐控制器，如下图：

二、视频

解释：

代码：

<body>
<video src="../mp3/bb.mp4" controls poster="../image/a1.png" height="200"></video>
</body>

效果图：

但是注意了，有些浏览器是不支持一些视频格式的，例如谷歌就不支持flv格式，所以需要要注意一下，多准备一些视频格式

2021.07.19更新

实现文件预览：视频、音频、pdf、图片等格式文件

html：
<el-dialog
    title="预览"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    width="1180px"
    :before-close="beforeClose"
  >
    <div v-if="['mp4','avi','wmv','mp3'].includes(format)">
      <!-- 音视频预览 -->
      <video
        id="_video"
        width="100%"
        height="100%"
        controls="controls"
        preload="auto"
      >
        <source
          src=""
          :type="`'video/'${format}`"
        >
      </video>
    </div>
    <div v-else-if="['pdf','pptx','docx'].includes(format)">
      <!-- embed标签定义嵌入的内容，这里插入pdf预览-->
      <embed
        id="embedPdf"
        type="application/pdf"
        class="pdf-style"
      >
    </div>
    <div v-else-if="['png','jpg'].includes(format)">
      <!-- 图片预览 -->
      <img
        id="img"
        class="pdf-style img-style"
        :src="imgUrl"
      >
    </div>
  </el-dialog>

js：
 mounted() {
        this.getFile(this.viewFileData);
},
methods:{
        //文件数据
        getFile(val){
            //文件预览的流数据处理
            if(val !== {}) {
                let fileRes = val.fileName;
                let format = fileRes.substring(fileRes.lastIndexOf(".") + 1);
                this.format = format;
                let data = {
                    fileKey: this.previewStateLogo === 'Release' ? val.fileIdentify : val.ossNo,
                    fileName: fileRes,
                    fileType: this.format,
                }
                //ppt、word就要使用pdfOssNo标识，使用后端转成pdf的流标识，根据需求来，没必要就不用它
                if(['pptx','docx'].includes(format)){
                    data.fileKey = val.pdfOssNo
                }
                //请求后端得到返回的流数据
                meetingApi.previewFileDetail(data).then(response => {
                    const res = response;
                    if (res.status === 200) {
                        if (['mp4','avi','wmv','mp3'].includes(format)) {
                            let videoUrl = window.URL.createObjectURL(new Blob([res.data], {type: `"application/${format}"`}));
                            document.getElementById('_video').src = videoUrl;   //把videoUrl渲染到指定的容器中
                        } else if(['pdf','pptx','docx'].includes(format)){
                            let pdfUrl = window.URL.createObjectURL(new Blob([res.data],{type: "application/pdf;chartset=UTF-8;"}));
                            document.getElementById('embedPdf').src = pdfUrl;   //把pdfurl渲染到指定的容器中
                        }else if(['png','jpg'].includes(format)){
                            let blob = new Blob([res.data]); // 文件转化成二进制文件
                            this.imgUrl = URL.createObjectURL(blob); //转化成ur
                        }
                    }
                })
            }
}

这样你想要的文件就会根据你格式渲染出来预览

视频学习于：https://xuexi.boxuegu.com/video.html?courseId=1044&moduleId=101478&type=PATH&phaseId=629

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^