微信小程序上传_客户端上传_上传SDK

安装

在页面上引入下面的JS脚本，见视频上传SDK下载

    import VODUpload from 'aliyun-upload-sdk-1.0.0.min.js'

整体步骤

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

1. 请求上传地址加凭证或STS

1.1 请求上传地址加凭证

上传图片和上传视频获取上传地址和凭证所请求的API是不同的。客户端上传视频：需要请求向AppServer发送请求，AppServer通过OpenApi向阿里云点播服务发送CreateUploadVideo请求。请求成功将返回上传地址，上传凭证以及VideoId，AppServer需要将结果返回给客户端。客户端上传图片：需要请求向AppServer发送请求，AppServer通过OpenApi向阿里云点播服务发送CreateUploadImage请求。请求成功将返回上传地址，上传凭证以及ImageURL，AppServer需要将结果返回给客户端。

1.2 请求STS

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

基本流程

upload-by-STS

2. 初始化

首先，我们需要声明一个VODUpload初始化回调

var uploader = new VODUpload({
       //阿里账号ID，必须有值 ，值的来源https://help.aliyun.com/knowledge_detail/37196.html
       userId:"0",
       //上传到点播的地域， 默认值为'cn-shanghai',//eu-central-1,ap-southeast-1
       region:"",
       //网络原因失败时，重新上传次数，默认为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){
       }
  });

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

基本流程

client upload

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

示例代码

 var uploader = new VODUpload({
       //阿里账号ID，必须有值 ，值的来源https://help.aliyun.com/knowledge_detail/37196.html
       userId:"0",
       //网络原因失败时，重新上传次数，默认为3
       retryCount: 3,
       //网络原因失败时，重新上传间隔时间，默认为2秒
       retryDuration: 2,
      // 开始上传
      '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");
       }
  });

2.2 STS方式

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

var uploader = new VODUpload({
       //网络原因失败时，重新上传次数，默认为3
       retryCount: 3,
       //网络原因失败时，重新上传间隔时间，默认为2秒
       retryDuration: 2,
      // 开始上传
      '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");
       }
  });

3 列表管理

3.1 添加上传文件

需要使用 wx.chooseImage、wx.chooseVideo 让用户选择文件。获取到用户选择的文件后，添加到上传列表中。

 ``` javascript
    wx.chooseVideo({
        success: function (res) {
            var file = {url: res.tempFilePath, coverUrl: res.thumbTempFilePath};
            var userData = '{"Vod":{}}';
            uploader.addFile(file, null, null, null, userData)
        }
    })
 ```

上传时，可以选择是否启用水印和优先级，userData是一个json对象字符串。第一级的Vod是必须的，Vod下面添加属性，userData支持的属性参考点播服务的createUploadVideo，接口示例如下：

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

3.2 删除上传文件

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

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

3.3 取消单个文件上传

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

3.4 恢复单个文件上传

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

3.5 获取上传文件列表

 ```
 uploader.listFiles();
 ```

3.6 清理上传文件列表

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

4 上传控制

4.1 开始上传

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

4.2 停止上传

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

4.3 上传凭证失效后恢复上传

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

4.4 设置上传地址和上传凭证

设置上传地址和上传凭证方法在onUploadstarted回调里调用，此回调的参数包含uploadInfo的值。
 ```
 uploader.setUploadAuthAndAddress(uploadInfo,uploadAuth, uploadAddress, videoId);
 ```
>注：获取上传凭证和上传地址，请查看[相关文档](~~52227~~) 。

4.5 设置STS Token

设置STS Token方法在onUploadstarted回调里调用，此回调的参数包含uploadInfo的值。
 ```
 uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
  ```

4.6 上传STS Token失效后恢复上传

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