记React项目中使用视频上传SDK

• 前言
  目前百度上面有很多大佬写过Angular、Vue的教程,而官方提供的事纯JS的demo , 对我司的项目不是很友好,所以我只能自己探索 , 其实这个SDK用起来挺简单的 , 包括Android和Ios都不难 , 但是由于前端这边可能是没人维护 , 导致官方提供的资料里面还没有关于React的资料。baidu上的资料也不是很多 ,故我在此记录一下 , 希望他日有缘人寻得此方法 ,...

• 废话不多说直接进入主题。
  不管是什么项目都需要先导入三个JS库

    <!--  IE需要es6-promise -->
    <script src="../lib/es6-promise.min.js"></script>
    <script src="../lib/aliyun-oss-sdk5.2.0.min.js"></script>
    <script src="../aliyun-vod-upload-sdk1.4.0.min.js"></script>

• 阿里这边目前支持两种上传方式 , 上传地址加凭证和STS方式 ,我这边用的是STS Token的方式
  上代码 :

 fileChange(e) {
    console.log(e);
    this.file = e.target.files[0];
    if (!this.file) {
      message.error('请先选择需要上传的文件!');
      return;
    }
    var userData = '{"Vod":{}}';
    if (this.uploader) {
      this.uploader.stopUpload();
    }
    this.uploader = this.createUploader();
    this.uploader.addFile(this.file, null, null, null, userData);
    this.authUpload();
  }
  //开始上传
  authUpload() {
    if (this.uploader !== null) {
      this.uploader.startUpload();
    }
  }
  createUploader() {
    var that = this;
    var uploader = new AliyunUpload.Vod({
      timeout: 60000,
      partSize: 1048576,
      parallel: 5,
      retryCount: 3,
      retryDuration: 2,
      region: 'cn-shanghai',
      userId: '1868162826898636',
      addFileSuccess: function(uploadInfo) {
        console.log(uploadInfo, '添加文件成功', uploadInfo.file.name, uploadInfo.videoId);
        that.videoProgressFun(0.1);
      },
      // 开始上传
      onUploadstarted(uploadInfo) {
        $.ajax({
          type: 'GET',
          contentType: 'application/json;charset=UTF-8',
          url: ` https://app.mobilityclub.cn/admin/admin/video/assumeRole`,
          dataType: 'json',
          headers: {
            token: cookie.get('CMMCSystemToken'),
            version: 'v1',
          },
          success: function(data) {
            console.log(data, '后台获取的上传凭证');
            var accessKeyId = data.body.info.accessKeyId;
            var accessKeySecret = data.body.info.accessKeySecret;
            var secretToken = data.body.info.securityToken;
            uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken);
          },
        });
      },
      onUploadSucceed: function(uploadInfo) {
        message.success('上传视频成功');
        that.videoIdsaveFun(uploadInfo.videoId);
        that.videoNamesaveFun(uploadInfo.file.name);
        console.log(
          `上传成功:${uploadInfo.file.name},endpoint:${uploadInfo.endpoint},bucket:${
            uploadInfo.bucket
          },object:${uploadInfo.object}`
        );
      },
      onUploadFailed: function(uploadInfo, code, message) {
        console.log('上传失败', uploadInfo, code, message);
      },
      onUploadCanceled: function(uploadInfo, code, message) {
        console.log('取消上传', uploadInfo, code, message);
      },
      onUploadProgress: function(uploadInfo, totalSize, progress) {
        console.log('文件上传进度', uploadInfo, totalSize, progress);
        if(progress == 0){
          progress = 0.2
        }
        that.videoProgressFun(progress);
      },
      onUploadTokenExpired: function(uploadInfo) {
        console.log('上传凭证超时', uploadInfo);
      },
      onUploadEnd: function(uploadInfo) {
        console.log('全部文件上传结束');
      },
    });
    return uploader;
  }

 <input type="file" onChange={this.fileChange.bind(this)} />

• 代码挺简单,也很好理解,但是我的代码水平比较差,只能写成这样了,希望对大家有帮助吧!

• 最后我说一下我这里遇到的坑,我项目中没有index.html文件,只有一个叫document.ejs的,这个文件用传统 ../../ 这样的方式无法导入js文件,需要用他自己的方法,具体的因为我项目计较着急就没有看,用的最笨的方法,把这三个文件传到我司自己的服务器上,这样就可以了。

• 最后的最后,如果有什么问题,可以评论或者私我,大家一起交流