vue + elementUI Upload 上传视频上传格式尺寸宽高时长,限制视频上传格式、尺寸、时长

vue + elementUI Upload 上传,限制视频上传格式、尺寸、时长

HTML

// An highlighted block
<el-upload
  ref="uploadVideo"
  action="no"
  :show-file-list="false"
  :auto-upload="true"
  :before-upload="videoBeforeUpload"
  :http-request="uploadSuccess"
  accept=".mp4"
  drag
>
  <video v-if="videoSrc!==''" :src="videoSrc" id="avatar"></video>
  <i else class="el-icon-video-camera-solid"></i>
  <div class="el-upload__text"><em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">视频规格：1280x720；格式：MP4；大小：<= 30M；时长：<= 30s</div>
</el-upload>

限制格式

// 这里写只能接收的文件格式
accept=".mp4"

js

// An highlighted block
videoBeforeUpload(file){
	const self = this
    const isLt30MB  = file.size / 1024 / 1024 < 30;
    const isSize = new Promise(function(resolve, reject) {
      let _URL = window.URL || window.webkitURL;
      let videoElement = document.createElement('video')
      // 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 元数据包括：时长、尺寸（仅视频）以及文本轨道。
      videoElement.addEventListener("loadedmetadata", function (_event) {
        let width = videoElement.videoWidth
        let height = videoElement.videoHeight
        let duration = videoElement.duration; // 视频时长
        if(!isLt30MB) return operatTip('error','上传视频大小不能超过30MB！')
        if(Math.floor(duration) >= 30) return operatTip('error','上传视频时长不能超过 30S！')
        let valid = `${width}*${height}` === '1280*720'
        valid ? resolve() : reject();
      })
      videoElement.src = _URL.createObjectURL(file)
    }).then(() => {
       return file;
    },() => {
      operatTip('error','上传视频尺寸为 1280*720！')
      return Promise.reject();
   });
   return isSize ;
},

// URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。
// 这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
// 语法
objectURL = URL.createObjectURL(object);
// 参数
object
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​
// 返回值
一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容

上传成功自定义 HTTP 方法

// An highlighted block
uploadSuccess(val){
   let fd = new FormData();
   fd.append('file',val.file);
   // 下面是后台给的的上传接口
   this.$axios.upload(fd).then( res =>{
      if(res.data.code !== 200) return operatTip('error', res.data.msg)
      this.videoSrc =  res.data.data
   })
},