JavaScript版本

更新时间：2017-02-20 18:02:17

• 安装

  上传SDK下载

  在页面上引入下面两个JS脚本

  <script src="aliyun-sdk.min.js"></script>
  <script src="vod-sdk-upload-1.0.5.min.js"></script>
  

• 创建VODUpload实例

  并设置回调函数

  var uploader = new VODUpload({
      // 文件上传失败
      'onUploadFailed': function (uploadInfo, code, message) {
        log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
      },
      // 文件上传完成
      'onUploadSucceed': function (uploadInfo) {
        log("onUploadSucceed: " + uploadInfo.file.name + ", oss:" + "http://" + uploadInfo.bucket + "." + uploadInfo.endpoint.substring(7) + "/" + uploadInfo.object);
      },
      // 文件上传进度，单位：字节
      'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
          log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(uploadedSize * 100 / totalSize) + "%");
      },
      // token超时
      'onUploadTokenExpired': function () {
          console.log("onUploadTokenExpired");
      }
  });
  

• 初始化

  填写账号信息，有2种方式

  • AK方式

    简单但是不够安全，建议测试环境下使用。

     uploader.init(accessKeyId, accessKeySecret);
    

  • STS方式

    安全但是较为复杂，建议生产环境下使用。STS的AK是临时、有时效性的，所以传递STS的AK是安全的。

     uploader.init(accessKeyId, accessKeySecret, secretToken, expireTime);
    

• 列表管理

  • 添加上传文件

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

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

    <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++) {
             // 逻辑代码
           }
         });
    

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

    uploader.addFile(event.target.files[i], 'http://oss-cn-hangzhou.aliyuncs.com', 'OSSBucketName', 'objectPath/' + event.target.files[i].name, userData);
    

    上传时，如何指定媒体的属性（标题、标签、描述、类目、用户自定义数据）呢？addFile函数最后的参数userData是一个json对象。第一级的Vod是必须的，Vod下面有5个属性，示例如下：

    var userData = '{"Vod":{"Title":"我是标题",
                            "Description":"我是描述",
                            "CateId":"1",
                            "Tags":"tag1,tag2,标签3",
                            "UserData":"user data"}}';
    

  • 删除上传文件，index对应listFiles接口返回列表中元素的索引

    uploader.deleteFile(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.startUpload();
    

  • 取消单个文件上传

    uploader.cancelFile(index);
    

  • 恢复单个文件上传

    uploader.resumeFile(index);
    

  • STS方式下，Token超时恢复上传

     uploader.resumeUploadWithToken(accessKeyId, accessKeySecret, secretToken, expireTime);