el-upload上传视频获取视频宽高、时长信息(多文件、单文件)

最新推荐文章于 2024-05-16 23:36:54 发布

weixin_42424660

最新推荐文章于 2024-05-16 23:36:54 发布

阅读量569

点赞数

分类专栏：前端开发升级打怪文章标签： vue.js elementui 前端

原文链接：https://www.cnblogs.com/-liujia/p/15074091.html

版权

前端开发升级打怪专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<el-upload
    :on-success="handleSuccess"
></el-upload>

async handleSuccess(res, file) {
    let videoInfo = "";
    // 防止触发两次
    if (file.status !== "success") return;
    if (file.raw.type === "video/mp4") {
      videoInfo = await this.getFileDuration(file.raw);
    } else {
      videoInfo = "";
    }
    console.log('时长', videoInfo)
},

// 获取视频时长
    getFileDuration(content) {
      return new Promise((resolve) => {
        const videoElement = document.createElement("video");
        videoElement.src = URL.createObjectURL(content);
        videoElement.addEventListener("loadedmetadata", function () {
          resolve(videoElement.duration);
        });
      });
    },