视频上传时校验上传视频的时长、尺寸等是否符合要求

平时做文件上传也做得挺多了 ，既然是文件上传嘛，肯定不是什么东西都能随意上传的，否则服务器压力可支撑不住啊，最常见的方式就是限制文件类型，限制文件大小之类的，不过如果是上传图片需要限制文件尺寸，上传视频/音频需要限制视频/音频时长呢，该怎么做呢？

无论是使用原生input标签还是使用各种框架进行文件上传时，都能获取到一个文件上传对象，此处以element-UI的上传组件为例，配置项before-remove为一个上传之前的钩子，该钩子就带有一参数即上文提到的file文件对象，拿到该文件对象就可以进行各种操作了。

1. 使用document.createElement创建一个HTML标签，通过该标签生成一个DOM
2. 该DOM加载时会有事件发生，监听事件回调即可获取元数据

    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const _URL = window.URL || window.webkitURL;
        const videoElement = document.createElement("video");
        videoElement.src = _URL.createObjectURL(file);
        // 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 元数据包括：时长、尺寸（仅视频）以及文本轨道。
        videoElement.addEventListener("loadedmetadata", _event => {
          const duration = videoElement.duration; // 视频时长
          const limitTime = 180;  //比如限制时长为3分钟，即180s
          if (duration <= limitTime) {
            //此处进行上传逻辑处理
            let formData = new FormData();
            formData.append("file", file);
            axios({
              formData,
              method: "post",
              url: "uploadApi",
              headers: {
                "Content-Type": "multipart/form-data"
              }
            }).then(res=>{})
          } else {
            consloe.log(`上传视频不能超过${limitTime}秒！`);
            reject(false);
          }
        });
      });
    },`