el-upload拖拽上传一个视频

<el-form-item label="视频信息: " prop="aliyun_videoid" :class="newVideoUpload ? 'top_15' : ''">
<el-upload
  v-if="newVideoUpload"
  class="uploadVideo"
  drag
  action="#"
  :limit="1"
  :on-exceed="onExceedVideo"
  :http-request="upLoadVideo"
  :on-remove="clickremove"
  :before-upload="beforeUploadType"
  accept=".mp4,.avi,.rmvb,.mkv,.MP4,.AVI,.RMVB,.MKV"
  multiple
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">
    <div>
      将文件拖到此处，或
      <em>点击上传</em>
    </div>
    <div>支持上传mp4，avi，rmvb，mkv格式视频，单个视频不能超过5GB</div>
    <div>严禁上传包含色情、暴力、反动等相关违法信息的视频。</div>
  </div>
</el-upload>
<el-progress v-if="authProgressFlag" :percentage="authProgress" style="width: 500px; margin: 5px 0"></el-progress>
<div v-if="isEdit" class="edit_box">
  <div class="videoNameBox">{{ videoName }}</div>
  <div><i v-if="pageType === 'edit'" class="el-icon-error isNone" @click="deleteEdit"></i></div>
</div>
</el-form-item>

authProgress: 0,
uploader: null,


onExceedVideo(files, fileList) {
  this.$message.error('只能上传单个视频')
},

upLoadVideo(data) {
  this.file = data.file
  var userData = '{"Vod":{}}'
  if (this.uploader) {
    this.uploader.stopUpload()
    this.authProgress = 0
    this.statusText = ''
  }
  this.uploader = this.createUploader()
  this.uploader.addFile(this.file, null, null, null, userData)
  this.uploadDisabled = false
  this.pauseDisabled = true
  this.resumeDisabled = true
  this.uploadFilelist = this.uploader.listFiles()
  this.authUpload()
},

clickremove(file, fileList) {
  this.authProgressFlag = false
},
beforeUploadType(file) {
  const attri = file.name.substring(file.name.lastIndexOf('.'), file.name.length).toLowerCase()
  if (!(attri === '.mp4' || attri === '.avi' || attri === '.rmvb' || attri === '.mkv' || attri === '.MP4' || attri === '.AVI' || attri === '.RMVB' || attri === '.MKV')) {
    this.$message.error('暂不支持该文件类型上传')
    return false
  }
},

createUploader(type) {
  const _that = this
  const uploader = new window.AliyunUpload.Vod({
    timeout: _that.timeout || 60000,
    partSize: _that.partSize || 1048576,
    parallel: _that.parallel || 5,
    retryCount: _that.retryCount || 3,
    retryDuration: _that.retryDuration || 2,
    region: _that.region,
    userId: _that.userId,
    // 添加文件成功
    addFileSuccess: (uploadInfo) => {
      console.log(' 添加文件成功 :', uploadInfo)
      _that.uploadDisabled = false
      _that.resumeDisabled = false
      _that.statusText = '添加文件成功, 等待上传...'
      // console.log('添加文件成功,addFileSuccess: ' + uploadInfo.file.name)
    },
    // 开始上传
    onUploadstarted: (uploadInfo) => {
      console.log(' 开始上传 :', uploadInfo)
      if (!uploadInfo.videoId) {
        materialLibrary.NewVideoGetVoucher({ videourl: '‪F:\\视频1.mp4', title: uploadInfo.file.name }).then((res) => {
          console.log(' res :', res)
          uploader.setUploadAuthAndAddress(uploadInfo, res.data.UploadAuth, res.data.UploadAddress, res.data.VideoId)
        })
      } else {
        console.log(uploadInfo.videoId, '有videoId')
        console.log(uploadInfo, '有videouploadInfo')
      }
    },
    // 文件上传成功
    onUploadSucceed: (uploadInfo) => {
      console.log('文件上传成功', uploadInfo)
      // console.log('onUploadSucceed: ' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:' + uploadInfo.bucket + ', object:' + uploadInfo.object)
      _that.statusText = '文件上传成功!'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const j = Math.floor(Math.log(uploadInfo.file.size) / Math.log(k))

      _that.dcTraderAddFrom.size = Math.floor((uploadInfo.file.size / Math.pow(k, j).toPrecision(3)) * 100) / 100 + sizes[j] // 视频大小
      _that.dcTraderAddFrom.aliyun_videoid = uploadInfo.videoId // 阿里云 id
    },
    // 文件上传失败
    onUploadFailed: (uploadInfo, code, message) => {
      // console.log('onUploadFailed: file:' + uploadInfo.file.name + ',code:' + code + ', message:' + message)
      _that.statusText = '文件上传失败!'
      // console.log('文件上传失败')
    },
    // 取消文件上传
    onUploadCanceled: (uploadInfo, code, message) => {
      // console.log('Canceled file: ' + uploadInfo.file.name + ', code: ' + code + ', message:' + message)
      _that.statusText = '文件已暂停上传'
    },
    // 文件上传进度，单位：字节,  可以在这个函数中拿到上传进度并显示在页面上
    onUploadProgress: (uploadInfo, totalSize, progress) => {
      _that.authProgressFlag = true
      // console.log('onUploadProgress:file:' + uploadInfo.file.name + ', fileSize:' + totalSize + ', percent:' + Math.ceil(progress * 100) + '%', '文件上传中...')
      const progressPercent = Math.ceil(progress * 100)
      _that.authProgress = progressPercent
      _that.statusText = '文件上传中...'
    },
    // 上传凭证超时
    onUploadTokenExpired: (uploadInfo) => {
      // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
      // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
      // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
      const refreshUrl =
        'https://demo-vod.cn-shenzhen.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' +
        uploadInfo.videoId
      axios.get(refreshUrl).then(({ data }) => {
        const uploadAuth = data.UploadAuth
        uploader.resumeUploadWithAuth(uploadAuth)
        // console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
      })
      _that.statusText = '文件超时...'
    },
    // 全部文件上传结束
    onUploadEnd: (uploadInfo) => {
      // console.log('文件上传完毕')
      _that.statusText = '文件上传完毕'
    }
  })
  return uploader
},

deleteEdit() {
  this.dcTraderAddFrom.aliyun_videoid = ''
  this.dcTraderAddFrom.size = ''
  this.isEdit = false
  this.newVideoUpload = true
},