vue移动端input上传视频之处理视频

今天我们来说说上传视频
话不多少 上代码

<input  type="file"   @change="videoChange($event)"   accept="video/*" >      

type："file" 上传文件的格式
accept：image/* 上传类型（这里设置的是video/*,就是上传视频的所有类型啦，我们可以更加项目需求设置不同的类型video/MP4）

上传视频

    //  上传视频
      videoChange(e){  
        var video = e.target.files
        var param = new FormData()
        if(video[0].size > 50*1024*1024){  设置视频大小不得超过多少M  我这50M
          Toast('视频不得超过50M');
          return
        }else {
          param.append('file', video[0])
          param.append('type', '2')
          let that = this
      //上传至服务器
          onUpload(param).then(res => {
            if (res.code == 200) {         
              that.videos.push(res.data)
          //获取视频的第一帧
              that.getVideoBase64(res.data.url).then(res=>{
                that.videoSrc = res
              })
            } else {
              Toast({message: '上传失败'), duration: 2000})
            }
          })
        }
      },
    

获取视频第一帧

处理跨域问题 需要服务端配置header

  //获取视频第一帧
      getVideoBase64(url) {
        var that = this
        return new Promise(function(resolve, reject) {
          let dataURL = ''
          const video = document.createElement('video')
          video.setAttribute('crossOrigin', 'anonymous')// 处理跨域
          video.setAttribute('width', 200)
          video.setAttribute('height', 220)
          video.setAttribute('autoplay', 'autoplay')
          video.setAttribute('src', url)
          video.addEventListener('loadeddata', function() {
            video.pause() // 加载完播放后马上，暂停
            const canvas = document.createElement('canvas')
            const width = video.width // canvas的尺寸和图片一样
            const height = video.height
            canvas.width = width * 0.6
            canvas.height = height * 0.6
            canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
            dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
            resolve(dataURL)
          })
        })
      },

如果你获取的视频是base64的 需要上传的是二进制流 那就看下面的代码吧

  //this.dataURLtoBlob2(item,this.upVideo)；
  //dataurl  视频base64地址
  //callback 上传服务器
    //  将视频base64转成二进制流
      dataURLtoBlob2(dataurl,callback) {

        var arr = dataurl;//
        var bstr = atob(arr.replace(/\s/g, ''));
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr], {
          type : 'video/mp4',
        });
        callback(blob)
      },

就这样吧，手累了
有不同想法的提出来大家讨论讨论