Web（JavaScript）如何上传SDK_视频点播-阿里云帮助中心

本文介绍如何使用JavaScript上传SDK将媒体文件（本地文件或网络文件）从客户端上传至点播存储，提供相关SDK的集成及文件上传指引。

说明更多SDK咨询问题，可搜索钉钉群号2720012141入群咨询专家。

前提条件

您已经开通了视频点播服务。开通步骤请参见开通视频点播服务。
您已经完成上传相关的系统配置，包括启用目标存储地域的存储地址和配置回调。操作指引请参见存储管理及回调设置。
您已准备好用于调用点播服务的账号。为避免阿里云账号AccessKey泄露带来的安全风险，推荐您创建RAM用户并授予其VOD相关权限。然后使用RAM用户的AK对（AccessKey ID和AccessKey Secret）访问点播服务。操作指引请参见创建RAM用户并授权。
（可选）如需使用STS临时授权方式（阿里云Security Token Service）访问点播服务，请为RAM用户创建角色并授予角色VOD相关权限。操作指引请参见创建RAM角色并进行STS临时授权。
说明 STS临时授权方式的适用场景请参见凭证方式与STS方式对比。
上传文件时，使用标准的input方式选择文件，文件大小不超过10 GB。如果文件大小超过10 GB，您可以使用断点续传。具体操作，请参见高级功能。
JavaScript上传SDK目前兼容的浏览器是：
- IE 10及以上版本
- Edge
- 主流版本的Chrome/Firefox/Safari
- 主流版本的Android/iOS/WindowsPhone系统默认浏览器

上传文件

使用JavaScript上传SDK上传文件的基本操作步骤如下：

说明

如果Web端上传中断，重新上传可能会产生404报错。您可以将SDK版本升级至1.5.3及以上版本，再重新上传即可。如需使用1.5.3之前版本重新上传，请修改待上传文件名称，不要与上传中断的文件重名，避免报错。
如需实现在一个页面同时上传多个文件，可通过创建多个上传实例来实现。一个上传实例对应一个上传文件，一个上传实例不能同时上传多个文件。

引入JavaScript上传SDK。
JavaScript脚本下载，请参见SDK下载。上传SDK当前未提供完整的模块化加载支持，如果通过import或require引用文件会导致报错ReferenceError: OSS is not defined。可根据业务需要选择使用如下两种引用方式：
- （推荐）在HTML中通过script引用
```

  <script src="../lib/es6-promise.min.js"></script>
  <script src="../lib/aliyun-oss-sdk6.17.1.min.js"></script>
  <script src="../aliyun-vod-upload-sdk1.5.4.min.js"></script>
```
- 模块化引用
  手动将OSS模块的内容赋值给Window，示例代码如下：
  说明如果已经在HTML通过script引用，则不需要重复引用。
```
import OSS from '../lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min'
window.OSS = OSS;
import '../lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.4.min'
```
请求上传地址和凭证或请求STS临时Token，用于上传授权。
JavaScript上传SDK中，文件上传流程包含从AppServer获取上传凭证（需要服务端接入）和文件上传到OSS Server（阿里云能力）两部分。接入JavaScript上传时只需要关心从AppServer获取上传凭证并设置给上传SDK即可，上传凭证支持以下两种获取方式：
- 部署授权服务获取上传地址和凭证的操作指引请参见获取上传地址和凭证。
- 部署STS服务获取STS临时Token的操作指引请参见获取STS临时Token。
执行结果
使用获取到的上传地址和凭证或STS临时Token作为入参初始化上传实例。

使用上传凭证（推荐）或STS临时Token初始化上传实例。

初始化上传实例分为声明初始化回调和初始化上传实例两步。

声明初始化回调。

声明AliyunUpload.Vod初始化回调。以下示例代码为初始化实例时，可传入的配置：

说明视频点播支持的服务地域及对应地域标识请参见点播地域标识。

var uploader = new AliyunUpload.Vod({
       //userID，必填，您可以使用阿里云账号访问账号中心（https://account.console.aliyun.com/），即可查看账号ID
       userId:"122",
     //上传到视频点播的地域，默认值为'cn-shanghai'，
     //eu-central-1，ap-southeast-1
     region:"",
       //分片大小默认1 MB，不能小于100 KB（100*1024）
       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) {
      },
      //上传凭证或STS token超时
      'onUploadTokenExpired': function (uploadInfo) {
      },
    //全部文件上传结束
    'onUploadEnd':function(uploadInfo){
       }
  });

初始化上传实例。请根据业务需求选择用上传地址和凭证方式或STS方式初始化上传实例。

在onUploadstarted回调中，获取或刷新上传凭证。根据实际情况，选择初始化上传实例的方法。

上传地址和凭证方式（推荐）

在上传开始后触发的onUploadStarted回调中调用setUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId)方法进行设置。

重要当获取到的上传凭证（UploadAuth）过期时，会触发onUploadTokenExpired回调，需要调用resumeUploadWithAuth(uploadAuth)方法，设置新的上传凭证继续上传。

//开始上传
//uploadInfo 包含要上传的文件信息
// {
//   videoId: '', // videoId，由服务端返回的音/视频ID
//   Endpoint: '', // OSS对外服务的访问域名
//   Bucket: '', // OSS存储空间
//   Object: '' // OSS存储数据的基本单元
// }
'onUploadstarted': function (uploadInfo) {
  // 上传方式，需要根据uploadInfo.videoId是否有值（该值由SDK通过localstorage获取），调用视频点播的不同接口获取uploadauth和uploadAddress
  // 如果videoId有值，调用刷新音视频上传凭证接口，否则调用获取音视频上传地址和凭证接口
  // 上传过程中，如果在点播控制台删除了音频或视频，即videoId不存在了，则会产生冲突，会出现控制台不存在videoId，而浏览器存在videoId的情况，报InvalidVideo.NotFound错误。此时，需手动清除localstorage
  var url = '';
  if (uploadInfo.videoId) {
    //如果uploadInfo.videoId存在，调用刷新音视频上传凭证接口
    url = 'refreshUrl'; // 此处URL需要替换为服务端AppServer对应的地址
  }
  else{
    //如果uploadInfo.videoId不存在，调用获取音视频上传地址和凭证接口
    url = 'createUrl'; // 此处URL需要替换为服务端AppServer对应的地址
  }

  // 以下请求实现为示例，用于演示设置凭证
  // 获取UploadAuth, UploadAddress, VideoId可能因AppServer实现有差异
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
        uploader.setUploadAuthAndAddress(uploadInfo, data.UploadAuth, data.UploadAddress, data.VideoId);
  });
},

//上传凭证超时
'onUploadTokenExpired': function (uploadInfo) {
  //实现时，根据uploadInfo.videoId调用刷新音视频上传凭证接口重新获取UploadAuth
  //从点播服务刷新的uploadAuth，设置到SDK里

  var url = 'refreshUrl'; // 此处URL需要替换为服务端AppServer对应的地址
  // 以下请求实现为示例，用于演示设置凭证
  // 获取UploadAuth, UploadAddress, VideoId可能因AppServer实现有差异
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
    uploader.resumeUploadWithAuth(data.UploadAuth);
  });
},

STS方式

在上传开始后触发的onUploadStarted回调中调用setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken);方法进行设置。

重要当STS临时Token超时，会触发onUploadTokenExpired回调，需要调用resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken)方法，设置新的STS继续上传。

onUploadstarted: function (uploadInfo) {
  // 如果是STSToken上传方式, 需要调用uploader.setUploadAuthAndAddress方法
  var stsUrl = 'stsUrl';
  // 以下请求实现为示例，用于演示设置凭证
  // 获取 accessKeyId, accessKeySecret,secretToken 可能因AppServer实现有差异
  fetch(stsUrl)
    .then((res) => res.json())
    .then((data) => {
    var info = data.SecurityTokenInfo
    uploader.setSTSToken(uploadInfo, info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
  });
},

onUploadTokenExpired: function (uploadInfo) {
  // 如果是上传方式二即根据STSToken实现时，从新获取STS临时账号用于恢复上传
  // 上传文件过大时可能在上传过程中sts token就会失效, 所以需要在token过期的回调中调用resumeUploadWithSTSToken 方法

  var stsUrl = 'stsUrl';
  // 以下请求实现为示例，用于演示设置凭证
  // 获取 accessKeyId, accessKeySecret,secretToken 可能因AppServer实现有差异
  fetch(stsUrl)
    .then((res) => res.json())
    .then((data) => {
    var info = data.SecurityTokenInfo
    uploader.resumeUploadWithSTSToken(info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
  });
},

根据上传的文件类型构造上传参数。

选择上传文件。

 <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(file,null,null,null,'{"Vod":{}}');


参数名称	是否必填	类型	参数描述
file	是	File	需要上传的音视频文件。
endpoint	否	String	想要上传到的endpoint，传入null则由服务端决定。
bucket	否	String	想要上传到的bucket，传入null则由服务端决定。
object	否	String	想要上传到的object，传入null则由服务端决定。
paramsData	否	String	当您使用STS方式上传时，可以通过`paramData`设置音频信息。`paramData`是一个JSON对象字符串，第一级的`Vod`是必须的。请在`Vod`下添加`paramData`支持的属性。更多信息，请参见获取音视频上传地址和凭证。

接口示例如下：

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

说明 paramData只有在STS方式上传时需要在SDK指定，如果是上传地址和凭证方式，则在获取上传凭证CreateUploadVideo接口的参数里指定，无需在SDK里指定paramData参数。

开始上传。
说明目前客户端仅支持音视频文件上传。
1. 调用startUpload()方法开始上传。
```
uploader.startUpload();
```
2. 文件开始上传后，onUploadProgress回调开始同步上传进度。
3. 文件上传成功后，onUploadSucceed回调会返回上传结果。

执行结果

音视频上传成功后会返回videoId作为音视频ID，拿到videoId后需要获取播放地址进行播放。更多信息，请参见通过播放凭证播放。
图片上传完成后不会返回imageUrl，可事先配置回调事件为图片上传完成的回调设置，待收到图片上传完成的事件通知后，在该事件通知中可以获取到图片的URL（FileURL）。开启URL鉴权后URL会有过期时间。更多信息，请参见URL鉴权。

队列管理

对于上传中或者上传完成的文件，可以通过对应的API进行管理。支持的API如下：

获取上传文件列表
返回值为通过addFile添加的文件信息列表。其中的file属性为对应的File类型的文件，可以通过遍历获取到需要操作的文件的index。
```
var list = uploader.listFiles();
for (var i=0; i<list.length; i++) {
    log("file:" + list[i].file.name);
}
```

删除上传文件

uploader.deleteFile(index);//需要删除的文件index，对应listFiles接口返回列表中元素的索引

取消单个文件上传
说明 cancelFile成功后会在控制台打印oss is cancel as error。这是SDK为了避免已上传的部分分片文件占用存储空间（如果占用就会产生存储费用）做的处理。
```
uploader.cancelFile(index);
```
恢复单个文件上传
```
uploader.resumeFile(index);
```
清理上传文件列表
```
uploader.cleanList();
```

上传凭证

设置上传地址和上传凭证

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

const {VideoId,UploadAuth,UploadAddress} = data;
uploader.setUploadAuthAndAddress(uploadInfo,UploadAuth,UploadAddress,VideoId);


参数名称	参数描述
uploadInfo	将onUploadstarted回调中的第一个参数进行透传
uploadAuth	CreateUploadVideo接口返回
uploadAddress	CreateUploadVideo接口返回
videoId	CreateUploadVideo接口返回

上传凭证失效后恢复上传
一般在onUploadTokenExpired回调中调用，用于上传凭证过期后更新上传凭证。uploadAuth为RefreshUploadVideo接口中返回的上传凭证。
```
const {VideoId,UploadAuth,UploadAddress} = data;
uploader.resumeUploadWithAuth(UploadAuth);
```

设置STS Token

用于通过STS方式进行上传时，设置上传地址和上传凭证方法。一般在onUploadstarted回调里调用，此回调的参数包含uploadInfo的值。

var info = data.SecurityTokenInfo
uploader.setSTSToken(uploadInfo,info.AccessKeyId,info.AccessKeySecret,info.SecretToken);


参数名称	参数描述
uploadInfo	将onUploadstarted回调中的第一个参数进行透传
accessKeyId	CreateSecurityToken接口返回
accessKeySecret	CreateSecurityToken接口返回
secretToken	CreateSecurityToken接口返回

上传STS Token失效后恢复上传
一般在onUploadTokenExpired回调中调用，用于通过STS方式进行上传时上传凭证过期后更新上传凭证。
```
var info = data.SecurityTokenInfo
uploader.resumeUploadWithSTSToken(info.AccessKeyId, info.AccessKeySecret, info.SecretToken);
```

上传控制

停止上传

说明 stopUpload要确保文件正在上传，有文件上传进度时才能工作。

uploader.stopUpload();

高级功能

断点续传

在上传过程中，由于某种原因（例如：页面被关闭、浏览器崩溃等）没有上传完成，下次选择同一个文件上传时， SDK会从上次完成的位置继续上传，并在onUploadstarted回调中获取上传凭证。使用上传地址和凭证方式上传时，用户可以根据回调返回的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);
}
}

获取断点信息：

 uploader.getCheckpoint(file);