Vue+element ui 上传视频

直接上代码
(利用了阿里云浏览器直传方式)

        <el-form-item label="视频:" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action=""
            :http-request="handlePreview2"
            :data="uploadImgData"
            :show-file-list="false"
            :on-change="handlePreview"
            :before-upload="beforeAvatarUpload"
            :on-progress="uploadVideoProcess"
            :on-success="handleAvatarSuccess"
          >
            <video
              width="100%"
              v-if="form.videoUrl"
              controls="controls"
              :key="menuKey"
            >
              <source :src="form.videoUrl" type="video/mp4" />
            </video>
            <i
              v-else-if="!form.videoUrl"
              class="el-icon-plus avatar-uploader-icon"
            ></i>
          </el-upload>
        </el-form-item>

data:
	  uploadImgData: { busiName: 32 },
	  url: '',
methods: 
      async handlePreview2(param) {
        let file = param.file
        var formData = new FormData()
        const data = await fileUpload()
        let key = data.data.dir + file.uid + file.name
        formData.append('key', key)
        formData.append('policy', data.data.policy)
        formData.append('OSSAccessKeyId', data.data.accessId)
        formData.append('success_action_status', '200')
        formData.append('signature', data.data.signature)
        formData.append('file', file.raw)
        let config = {
          method: 'post',
          url: data.data.host,
          Headers: {
            Accept: '*/*',
            'content-type': 'application/form-data',
          },
          data: formData,
          // 获取上传的进度
          onUploadProgress: (event) => {
            param.file.percent = (event.loaded / event.total) * 100
            this.url = data.data.host + '/' + key
            //此处调用处理中
            param.onProgress(param.file)
          },
        }
        axios(config).then((res) => {
          param.onSuccess(res)
        })
        if (data.success) {
          this.url = data.data.host + '/' + key
        } else {
          this.$message.error(data.message)
        }
      },
    async handlePreview(file) {
        var formData = new FormData()
        const data = await fileUpload()
        let key = data.data.dir + file.uid + file.name
        formData.append('key', key)
        formData.append('policy', data.data.policy)
        formData.append('OSSAccessKeyId', data.data.accessId)
        formData.append('success_action_status', '200')
        formData.append('signature', data.data.signature)
        formData.append('file', file.raw)
        let config = {
          method: 'post',
          url: data.data.host,
          Headers: {
            Accept: '*/*',
            'content-type': 'application/form-data',
          },
          data: formData,
        }
        axios(config)
        if (data.success) {
          this.form.videoUrl = data.data.filePath
          this.form.videoUrl = data.data.host + '/' + key
        } else {
          this.$message.error(data.message)
        }

        this.times = []
      },
      beforeAvatarUpload(file) {
        const isMp4 = file.type === 'video/mp4'
        // 限制文件最大不能超过 300M
        const isLt2M = file.size / 1024 / 1024 < 300

        if (!isMp4) {
          this.$message.error('视频只能是mp4格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传视频大小不能超过 300MB!')
        }
        return isMp4 && isLt2M
      },

效果