element上传时判断视频\音频时长

html

before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

 <el-upload :before-upload="beforeUpload"></el-upload>

js

    async beforeUpload(file) {
      return new Promise((resolve, reject) => {
        //文件验证【后缀名|文件类型、文件大小】应该写在这里。
        //不允许上传同名文件。如果后面改为允许的话，要注意排查删除同名文件的问题【根据名字找文件得改为根据文件id来找文件】。
        let existFile = this.fileList.slice(0, this.fileList.length - 1).find(f => f.name === file.name);
        console.log("beforeUpload file", file);
        if (existFile) {
          resetMessage.error("您上传了同名文件：" + file.name + "，已为您移除。");
          reject()
        }
        let FileExt = file.name.replace(/.+\./, "");
        if (
          ["mp3", "wav", "m4a", "mp4"].indexOf(FileExt.toLowerCase()) === -1) {
          // "此处只允许上传后缀名为.mp3,.wav,.m4a,.mp4,的文件！"
          resetMessage.error("请上传于MP3、WAV、MP4、M4a格式，其他格式暂不支持；");
          reject()
        }
        if (file.size > 1024 * 1024 * 512) {
          resetMessage.error("上传的录音文件大小不能超过512M");
          reject()
        }
        // --------------判断录音时长是否超过5小时----重点--------------------------
        var content = file;
        var url = URL.createObjectURL(content);
        //经测试，发现audio也可获取视频的时长
        var audioElement = new Audio(url);
        // 苹果拿不到数据，可以先播放/关闭下
        // fixed ios
        audioElement.muted = true
        audioElement.play().then(() => audioElement.pause())
        // fixed ios
        audioElement.addEventListener("canplay", (_event) => {
          this.audioDuration = parseInt(audioElement.duration);
          if (this.audioDuration >= 18000) {
            resetMessage.error("上传文件的时长必须小于5小时");
            reject()
          } else {
            resolve()
          }
---------------------------------------------------------------------------------------
        });
        audioElement.addEventListener('error', () => {
          reject()
        })
      })
    },

思路

1、在拿到file文件时，new一个Audio，然后监听canplay(浏览器可以开始播放该音视频)事件，事件触发时，通过audioElement.duration获取总时长。

2、为什么要用到Promise，因为监听canplay事件属于异步，如果不用，会导致文件上传后才提示。