上传视频功能

效果图：

      <el-form-item label="店铺视频:" label-width="195px" prop="mediaUrl"
      :rules="{
              required: true,
              message: '请选择上传的文件',
              trigger: 'change',
            }">
            <uploadVideoOSS
              ref="successFile"
              :fileList="videoList"
              callBackName="successFile"
              :key="new Date().getTime()"
              :ossPrefix="'materialDir'"
              :uploadStyle="'file'"
              :accept="fjformat"
              :disabled="formDisabled"
              @successFile="successFiles"
            >
            </uploadVideoOSS>
      </el-form-item>

   data(){
    return{
      videoList: [],
        //视频  开始
        videoUrl: undefined,
        fjformat: undefined, 
     }
   },
    watch: {
    fjformat: {
      handler(newVal, oldVal) {
        if (newVal) {
          window.history.pushState(null, null, document.URL);
        }
      },
      deep: true,
    },
  },
created (){
       // 回显视频
       let mapav = {};
      if (singleDetail.contentType == 1) {
        _this.fjformat = ".mp4";
        mapav["name"] = "视频";
      } else if (singleDetail.contentType == 2) {
        _this.fjformat = ".mp3";
        mapav["name"] = "音频";
      } else {
        mapav["name"] = undefined;
        _this.fjformat = undefined;
      }
      mapav["url"] = singleDetail.materialUrl;
      _this.videoList.push(mapav);
}

    // 获取视频地址
    successFiles(childValue, callback) {
      let _this = this;
      _this.ruleForm.duration = childValue.duration;
      _this.ruleForm.materialUrl = childValue.url;
    },

 还有一个公共组件