安装

在页面上引入下面三个JS脚本,见 视频上传SDK下载

  <!--  IE需要es6-promise -->
  <script src="../lib/es6-promise.min.js"></script>
  <script src="../lib/aliyun-oss-sdk6.10.0.min.js"></script>
  <script src="../aliyun-vod-upload-sdk1.5.2.min.js"></script>		

整体步骤

  1. 请求上传地址加凭证或STS,相关概念请参见相关文档;
  2. 初始化上传实例,实例化上传有两种方式:上传地址加凭证和STS方式;
  3. 回调设置,所有的上传状态包括进度,上传成功,上传失败,凭证过期都在这里进行处理;
  4. 添加上传文件进入上传列表,目前主要支持视频文件和图片文件的上传;
  5. 启动上传;
  6. 回调处理;

请求上传地址加凭证或STS

请求上传地址加凭证

上传图片和上传视频获取上传地址和凭证所请求的API是不同的。 客户端上传视频:需要请求向AppServer发送请求,AppServer通过OpenApi向阿里云点播服务发送CreateUploadVideo请求。请求成功将返回上传地址,上传凭证以及VideoId,AppServer需要将结果返回给客户端。 客户端上传图片:需要请求向AppServer发送请求,AppServer通过OpenApi向阿里云点播服务发送CreateUploadImage请求。请求成功将返回上传地址,上传凭证以及ImageURL,AppServer需要将结果返回给客户端,然后通过上传地址,上传凭证上传图片,后面流程和上传视频一样,不过不需要处理断点续传,因为图片没有续传功能。

请求STS

通过STS方式,客户端需要向AppServer发送请求,AppServer向阿里云STS服务请求临时STS凭证。请求成功将返回STS凭证,AppServer需要将结果返回给客户端。

初始化

首先,我们需要声明一个AliyunUpload.Vod初始化回调

var uploader = new AliyunUpload.Vod({
       //阿里账号ID,必须有值 ,值的来源https://help.aliyun.com/knowledge_detail/37196.html
       userId:"122",
     //上传到点播的地域, 默认值为'cn-shanghai',//eu-central-1,ap-southeast-1
     region:"",
       //分片大小默认1M,不能小于100K
       partSize: 1048576,
     //并行上传分片个数,默认5
       parallel: 5,
     //网络原因失败时,重新上传次数,默认为3
     retryCount: 3,
     //网络原因失败时,重新上传间隔时间,默认为2秒
     retryDuration: 2,
      // 开始上传
      'onUploadstarted': function (uploadInfo) {
      },
      // 文件上传成功
      'onUploadSucceed': function (uploadInfo) {
      },
      // 文件上传失败
      'onUploadFailed': function (uploadInfo, code, message) {
      },
      // 文件上传进度,单位:字节
      'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
      },
      // 上传凭证超时
      'onUploadTokenExpired': function (uploadInfo) {
      },
    //全部文件上传结束
    'onUploadEnd':function(uploadInfo){
       }
  });
			

上传地址和凭证方式(推荐使用)

首先请求获取的上传地址和凭证初始化时无需设置,而是在开始上传开始后触发的onUploadStarted回调中调用setUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId);方法进行设置。 当token超时,会触发onUploadTokenExpired回调,需要调用resumeUploadWithAuth(uploadAuth)方法,设置新的上传凭证继续上传。

示例代码


var uploader = new AliyunUpload.Vod({
       //阿里账号ID,必须有值 ,值的来源https://help.aliyun.com/knowledge_detail/37196.html
       userId:"122",
       //分片大小默认1M,不能小于100K              
       partSize: 1048576,
     //并行上传分片个数,默认5
       parallel: 5,
     //网络原因失败时,重新上传次数,默认为3
     retryCount: 3,
     //网络原因失败时,重新上传间隔时间,默认为2秒
     retryDuration: 2,
	 //是否上报上传日志到点播,默认为true
	 enableUploadProgress: true,
      // 开始上传
      'onUploadstarted': function (uploadInfo) {
        log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
    //上传方式1, 需要根据uploadInfo.videoId是否有值,调用点播的不同接口获取uploadauth和uploadAddress,如果videoId有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
    if (uploadInfo.videoId) {
            // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
         }
     else{
            // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
         }
      //从点播服务获取的uploadAuth、uploadAddress和videoId,设置到SDK里
         uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
      },
      // 文件上传成功
      'onUploadSucceed': function (uploadInfo) {
        log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
      },
      // 文件上传失败
      'onUploadFailed': function (uploadInfo, code, message) {
        log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
      },
	  // 文件上传进度,单位:字节
      'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
          log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
      },
      // 上传凭证超时
      'onUploadTokenExpired': function (uploadInfo) {
          console.log("onUploadTokenExpired");
      //实现时,根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
      //https://help.aliyun.com/document_detail/55408.html
      //从点播服务刷新的uploadAuth,设置到SDK里    
    
      uploader.resumeUploadWithAuth(uploadAuth); 
      },
    //全部文件上传结束
    'onUploadEnd':function(uploadInfo){
           console.log("onUploadEnd: uploaded all the files");
       }
});	   	

STS方式

首先请求获取的STS初始化时无需设置,而是在开始上传开始后触发的onUploadStarted回调中调用setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken);方法进行设置。 当token超时,会触发onUploadTokenExpired回调,需要调用resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken)方法,设置新的Token继续上传。

var uploader = new AliyunUpload.Vod({
         //分片大小默认1M,不能小于100K
       partSize: 1048576,
     //并行上传分片个数,默认5
       parallel: 5,
     //网络原因失败时,重新上传次数,默认为3
     retryCount: 3,
     //网络原因失败时,重新上传间隔时间,默认为2秒
     retryDuration: 2,
	 //是否上报上传日志到点播,默认为true
	 enableUploadProgress: true,
      // 开始上传
      'onUploadstarted': function (uploadInfo) {
        log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
      //获取STS Token,设置到SDK
         uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken);
      },
      // 文件上传成功
      'onUploadSucceed': function (uploadInfo) {
        log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
      },
      // 文件上传失败
      'onUploadFailed': function (uploadInfo, code, message) {
        log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
      },
      // 文件上传进度,单位:字节
      'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
          log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
      },
      // 上传凭证超时
      'onUploadTokenExpired': function (uploadInfo) {
          console.log("onUploadTokenExpired");
          //重新获取STS token,恢复上传
      uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken);
      },
    //全部文件上传结束
    'onUploadEnd':function(uploadInfo){
           console.log("onUploadEnd: uploaded all the files");
       }
  });

			

列表管理

添加上传文件

注意 支持的文件大小<=10G。

需要使用标准的input方式让用户选择文件。

 ``` javascript

 <form action="">
   <input type="file" name="file" id="files" multiple/>
 </form>
 userData = '';
 document.getElementById("files")
  .addEventListener('change', function (event) {
    for(var i=0; i<event.target.files.length; i++) {
      // 逻辑代码
    }
  });

```		

获取到用户选择的文件后,添加到上传列表中。

 ``` javascript
 
 uploader.addFile(event.target.files[i], null, null, null, paramData);
 
 ```
			

STS方式上传时,可以选择是否启用水印和优先级,paramData是一个json对象字符串。第一级的Vod是必须的,Vod下面添加属性,paramData支持的属性参考点播服务的createUploadVideo获取视频上传地址和凭证,接口示例如下:

 ``` javascript
 
 var paramData = '{"Vod":{"Title":"test","CateId":"234"}"}';

 ```
			

paramData只有在STS的上传方式是需要在SDK指定, 如果是上传凭证的方式,则在获取上传凭证createUploadVideo接口的参数里指定,无需在SDK里指定paramData参数

删除上传文件

index,对应listFiles接口返回列表中元素的索引。

 ```
 uploader.deleteFile(index);
 ```
			

取消单个文件上传

 ```
 uploader.cancelFile(index);
 ```
			

恢复单个文件上传

 ```
 uploader.resumeFile(index);
 ```
			

获取上传文件列表

 ```

 uploader.listFiles();
 var list = uploader.listFiles();
for (var i=0; i<list.length; i++) {
    log("file:" + list[i].file.name + ", status:" +       list[i].state + ", endpoint:" + list[i].endpoint + ", bucket:" + list[i].bucket + ", object:" + list[i].object);
}

 ```
			

清理上传文件列表

 ```
 uploader.cleanList();
 ```
			

上传控制

开始上传

 ```
 uploader.startUpload();
 ```
			

停止上传

 ```
 uploader.stopUpload();
 ```
			

上传凭证失效后恢复上传

 ```
 uploader.resumeUploadWithAuth(uploadAuth);
 ```
			

设置上传地址和上传凭证

设置上传地址和上传凭证方法在onUploadstarted回调里调用,此回调的参数包含uploadInfo的值。

 ```
 uploader.setUploadAuthAndAddress(uploadInfo,uploadAuth, uploadAddress, videoId);
 ```
			
说明 获取上传凭证和上传地址,请查看相关文档 。

设置STS Token

设置STS Token方法在onUploadstarted回调里调用,此回调的参数包含uploadInfo的值。

 ```
 uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
  ```
			

上传STS Token失效后恢复上传

 ```
 uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
 ```
			

断点续传

用户在上传过程中,由于某种原因没有上传完成,在下次选择同一个文件上传时, SDK会从上次完成的位置继续上传,并且在onUploadstarted回调中,获取上传凭证, 如果使用的时上传方式1(通过uploadAuth和uploadAddress)上传时,用户需要根据回调返回的videoId的值,调用点播的不同接口, 如下:

 
onUploadstarted': function (uploadInfo) {
if (上传方式1) {
  if(!uploadInfo.videoId)//这个文件没有上传异常
  {
    //实际环境中调用调用点播的获取上传凭证接口
    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
  }
  else//如果videoId有值,根据videoId刷新上传凭证
  {
    //实际环境中调用点播的刷新上传凭证接口,获取凭证
    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
  }
}
else(上传方式2)
{
   //实际环境中调用获取STS接口,获取STS的值
   uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
			

}

 ```
			

获取断点信息

参数为file对象

 ```
 uploader.getCheckpoint(file);
 ```