vue+ant desgin pro 上传视频至阿里云

1. 在public文件目录的index.html中引入

<script src="http://mryt.kangdaedu.com/es6-promise.min.js"></script>
<script src="http://mryt.kangdaedu.com/aliyun-oss-sdk-5.3.1.min.js"></script>
<script src="http://mryt.kangdaedu.com/aliyun-upload-sdk-1.5.0.min.js"></script>

2. 前端编辑代码如下：

html:
<a-card type="inner" title="主备视频">
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="2">
        <a-button
          type="primary"
          style="margin:0 10px;float:right;"
          @click="SeeAnalysisVoide"
          size="large"
          :disabled="this.teachVideoId==undefined||this.teachVideoId=='' ? true:false "
        >预览</a-button>
      </a-col>
      <a-col class="gutter-row" :span="3">
        <a href="#" class="file" icon="video-camera">
          <input type="file" @change="getFile($event,'teachVideo')" accept=".mp4, .avi, .flv" />上传主备视频
        </a>
      </a-col>
      <a-col class="gutter-row" :span="2">
        <span
          style="color:blue;width:200px;margin:10px 0px;display:block;"
        >{{teachvideomessage}}</span>
      </a-col>
      <a-col class="gutter-row" :span="17">
        <a-progress
          :percent="teachVideoPercent"
          status="active"
          v-if="teachVideoUploading"
          style="margin:8px 0;"
        />
      </a-col>
    </a-row>
  </a-card>

//定义的数据
data:
 //主备视频所需参数
teachVideoUploading: false,
teachVideoPercent: 0,
teachvideomessage: "",
teachVideoId: "",


//方法
methods:{
	getFile(event, type) {
	   if (event.target.files.length > 0) {
	     var file = event.target.files[0];
	     var imgName = file.name;
	     var idx = imgName.lastIndexOf(".");
	     if (idx != -1) {
	       var ext = imgName.substr(idx + 1);
	       ext = ext.toLowerCase();
	       if (ext != "mp4" && ext != "avi" && ext != "flv") {
	         this.$message.error(
	           "文件格式不符合要求，请上传mp4、avi、flv格式的视频文件！"
	         );
	       } else {
	         console.log(file);
	         var userData = '{"Vod":{}}';
	         if (this.uploader) {
	           this.uploader.stopUpload();
	         }
	         this.uploader = this.createUploader(type);
	         console.log(userData);
	         this.uploader.addFile(file, null, null, null, userData);
	         this.uploader.startUpload();
	       }
	     } else {
	       this.$message.error(
	         "请选择正确的视频文件，符合要求的文件格式为mp4、avi、flv！"
	       );
	     }
	   }
	 },
	createUploader(type) {
	  let that = this;
	  let uploader = new AliyunUpload.Vod({
	    timeout: 60000,
	    //阿里账号ID，必须有值 ，值的来源https://help.aliyun.com/knowledge_detail/37196.html
	    userId: "1074034690116905",
	    //分片大小默认1M，不能小于100K
	    partSize: 1048576,
	    //并行上传分片个数，默认5
	    parallel: 10,
	    //网络原因失败时，重新上传次数，默认为3
	    retryCount: 10,
	    //网络原因失败时，重新上传间隔时间，默认为2秒
	    retryDuration: 2,
	    //是否上报上传日志到点播，默认为true
	    enableUploadProgress: true,
	
	    // 添加文件成功
	    addFileSuccess: function(uploadInfo) {
	      console.log("添加文件成功, 等待上传...");
	      console.log("addFileSuccess: " + uploadInfo.file.name);
	    },
	    // 开始上传
	    onUploadstarted: function(uploadInfo) {
	      //   console.log(uploadInfo);
	      // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
	      // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
	      // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
	      // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
	      // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
	      // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
	      if (uploadInfo.videoId) {
	        that.$api
	          .refreshUploadAuth({ videoId: that.teachVideoId })
	          .then(res => {
	            console.log("刷新视频上传凭证");
	          });
	      } else {
	        var title =
	          "【主备视频】第" + that.courseIndexText + "节  " + that.nameText;
	
	        var paramsData = {
	          coCourseDetailId: that.coCourseDetailId,
	          fileName: uploadInfo.file.name,
	          fileSize: uploadInfo.file.size,
	          title: title,
	          type: "teachVideo"
	        };
	
	        that.$api.getUploadAuth(paramsData).then(res => {
	          let uploadAuth = res.data.data.authMsg.uploadAuth;
	          let uploadAddress = res.data.data.authMsg.uploadAddress;
	          let videoId = res.data.data.authMsg.videoId;
	
	          that.teachVideoUploading = true;
	          uploader.setUploadAuthAndAddress(
	            uploadInfo,
	            uploadAuth,
	            uploadAddress,
	            videoId
	          );
	          that.teachVideoId = videoId;
	        });
	      }
	    },
	    // 文件上传成功
	    onUploadSucceed: function(uploadInfo) {
	      that.$message.success("文件上传成功!");
	    },
	    // 文件上传失败
	    onUploadFailed: function(uploadInfo, code, message) {
	      that.$message.success("文件上传失败，失败原因：" + message);
	    },
	    // 取消文件上传
	    onUploadCanceled: function(uploadInfo, code, message) {
	      that.$message.success("文件已暂停上传!");
	    },
	    // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
	    onUploadProgress: function(uploadInfo, totalSize, progress) {
	      that.teachVideoPercent = Math.ceil(progress * 100);
	    },
	    // 上传凭证超时
	    onUploadTokenExpired: function(uploadInfo) {
	      that.$api
	        .refreshUploadAuth({ videoId: that.teachVideoId })
	        .then(res => {
	          console.log("刷新视频上传凭证");
	        });
	    },
	    // 全部文件上传结束
	    onUploadEnd: function(uploadInfo) {
	      that.teachVideoUploading = false;
	      if (that.teachVideoId !== undefined || that.teachVideoId !== "") {
	        that.teachvideomessage = "已上传主备视频！！！！";
	        return;
	      }
	    }
	  });
	  return uploader;
	},
}