# 上传 Javascirpt SDK

# 快速开始


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script type="text/javascript">
    (function(url) {
        var firstScriptTag = document.getElementsByTagName('script')[0];
        var script = document.createElement('script');
        script.src = url + '?' + ~~(Date.now() / 1000 / 60);
        firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
    })('//service-cdn.qiqiuyun.net/js-sdk-v2/uploader/sdk-2.1.0.js');
  </script>
</head>
<body>
  <!-- 用于初始化的DOM节点 -->
  <div id="uploader-container"></div>
  <!-- 初始化 -->
  <script type="text/javascript">
    // 无界面上传sdk
    const uploader = new BatchUploaderSDK({
      initUrl: '',   // 上传请求初始化地址
      finishUrl: '', // 上传完成后的回调地址
      id: 'uploader-container', // 上传组件生成节点
      ui: 'batch'   // 组件UI样式，具体查看 接口 项
    });

    // 含界面上传sdk
    const uploader = new UploaderSDK({
      initUrl: '',   // 上传请求初始化地址
      finishUrl: '', // 上传完成后的回调地址
    });

    const events = ['start', 'stop', 'file.dequeue', 'file.finish'];

    events.forEach(function (eventName) {
        uploader.on(eventName, function (file) {
            console.log('事件触发：' + eventName, file)
        });
    });

    uploader.on('file.error', function(error){
        console.log(error.message);
    });
  </script>
</body>
</html>

# 参数列表

# 含界面上传组件独有

选项	类型	描述	是否必填
id	String	页面中用于初始化播放器的元素的唯一 id	是
locale	String	sdk语言类型，[默认值：'zh_CN']	否
ui	String	上传组件视图，[默认值：batch]	否

# 接口域名以及相关

选项	类型	描述	是否必填
initUrl	String	上传初始化地址, 需接入云平台上传服务、支持jsonp	是
finishUrl	String	上传完成后请求的地址, 需要支持jsonp	是
responseError	Boolean	initUrl 和 finishUrl 返回值为 error 时是否抛出 file.error 事件 [默认值：false]	否
server	String	文件接收服务端（可在单独策略中调整server）	否

# 文件限制相关(大小，类型，总数)

选项	类型	描述	是否必填
accept	Object	可上传文件的文件类型	否
multiple	Boolean	设置是否多选文件能力	否
fileNumLimit	int	验证文件总数量, 超出则不允许加入队列，[默认值：undefined]	否
fileSizeLimit	int	验证文件总大小, 超出则不允许加入队列，[默认值：undefined]	否
fileSingleSizeLimit	int	验证单个文件大小是否超出限制, 超出则不允许，例如: 2 * 1024 * 1024	否

# 触发元素相关(拖拽，上传)

修改此类数据可能会影响带UI的上传功能

选项	类型	描述	是否必填
dnd	Selector	指定 Drag And Drop 拖拽的容器，如果不指定，则不启动，例如: '#id', '.class' [默认值：undefined]	否
paste	Selector	指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。例如: '#id', '.class' [默认值：undefined]	否
pick	Selector,Object	指定选择文件的按钮容器，不指定则不创建按钮。例如: '#id', '.class' [默认值：undefined]	否

# 日志相关

选项	类型	描述	是否必填
disableSentry	Boolean	是否开启错误上报	否
sentryUrl	String	错误统计上报 url	否

# 分片上传相关

选项	类型	描述	是否必填
chunked	Boolean	是否要分片处理大文件上传 [默认值：false]	否
chunkSize	int	每一分片大小，默认大小为5M [默认值：5242880]	否
chunkRetry	int	如果某个分片由于网络问题出错，允许自动重传次数 [默认值：2]	否
threads	int	上传并发数。允许同时最大上传进程数 [默认值：1]	否
sendAsBinary	Boolean	是否已二进制的流的方式发送文件，这样整个上传内容 php://input 都为文件内容，其他参数在 $_GET 数组中。 [默认值：false]	否
method	String	文件上传方式，POST或者GET，[默认值：'POST']	否
formData	Object	文件上传请求的参数表，每次发送都会发送此对象中的参数，可以提交额外的数据 [默认值：{}]	否

# 参数属性详细解释

# ui

Enum Optional

视图参数配置

上传组件视图风格，默认为batch。可选：'simple', 'single'

simple: 单按钮上传
single: 单文件上传
batch : 批量文件上传

# pick

Object Optional

指定选择文件的按钮容器

  pick: {
    id: '#id',            //  指定选择文件的按钮容器
    innerHTML: '选择文件', //   指定按钮文字
    multiple: true        //  是否开起同时选择多个文件能力
  }

# accept

Object Optional

可上传文件的文件类型

  accept: {
    title: 'subtitle',          // `String` 文字描述
    extensions: ["mp4","avi","flv","f4v","mpg","wmv"],        // `String` 允许的文件后缀，不带点，多个用逗号分割，默认值：['*']
    mimeTypes: ["video/mp4","video/mpeg","video/x-la-asf","video/x-ms-asf","video/x-msvideo","video/x-sgi-movie","video/quicktime","video/3gpp"]     // `String` 媒体文件类型，默认值： ['*'] 
  }

文件类型	extensions	mimeTypes
字幕类型	'srt'	'text/srt'
flash类型	"swf"	"application/x-shockwave-flash"
音频类型	'mp3'	"audio/mpeg","audio/basic","audio/ac3","audio/ogg","audio/3gpp"
ppt类型	"ppt","pptx"	"application/vnd.ms-powerpoint","application/vnd.openxmlformats-officedocument.presentationml.presentation"
视频类型	"mp4","avi","flv","f4v","mpg","wmv","mov","vob","rmvb","mkv","m4v"	"video/mp4","video/mpeg","video/x-la-asf","video/x-ms-asf","video/x-msvideo","video/x-sgi-movie","video/quicktime","video/3gpp"
文档类型	"doc","docx","pdf","xls","xlsx","wps","odt"	"application/vnd.ms-excel","application/vnd.ms-outlook","application/vnd.ms-pkicertstore","application/vnd.ms-pkiseccat","application/vnd.ms-pkistl","application/vnd.ms-powerpoint","application/vnd.ms-project","application/vnd.ms-works","application/msword","application/pdf","application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

# uploader接口

# getStats()

描述：获取文件统计信息。

返回数据:

{
  successNum,   //上传成功的文件数
  progressNum,  //上传中的文件数
  cancelNum,  //被删除的文件数
  invalidNum,   //无效的文件数
  uploadFailNum,  //上传失败的文件数
  queueNum,   //还在队列中的文件数
  interruptNum,   //被暂停的文件数

}

用法：
```
uploader.getStats()
```

# addFiles() addFile()

描述：添加文件到队列。

用法：

fileInput.onchange = () => {
  // addFiles
  uploader.addFiles(fileInput.files);
  // addFile
  [...fileInput.files].forEach(file => {
    uploader.addFile(file);
  })
}

# removeFile()

描述：移除某一文件，并从队列中移除。
file描述: 需使用 file.enqueue 等事件抛出的file对象

用法：

uploader.removeFile(file.id);
uploader.removeFile(file);

# start(file?: Object)

描述：开始上传。

1. 此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。
2. 可以指定开始某一个文件。
3. stop(file) 暂定的文件无法用 start() 继续，需要使用 start(file)

file描述: 需使用 file.enqueue 等事件抛出的file对象

用法：

uploader.start();
uploader.start(file);

# stop(file?: Object)

描述：暂停上传。

1. 此方法可以暂停上传流程。
2. 可以指定暂停某一个文件。

file描述: 需使用 file.enqueue 等事件抛出的file对象
用法：
```
uploader.stop();
uploader.stop(file);
```

# getFile(fileId)

描述：获取file对象。
用法：
```
uploader.getFile(file.id);
```

# isInProgress()

描述：判断Uplaoder是否正在上传中。
用法：
```
uploader.isInProgress();
```

# isInProgress()

描述：判断Uplaoder是否正在上传中。
用法：
```
uploader.isInProgress();
```

# file接口

# setStatus()

描述：设置状态，状态变化时会触发statuschange事件。
用法：
```
file.setStatus('queue');
```

# 事件

# uploader事件

可通过sdk.on(String: eventName, Function: callback)操作添加事件监听

事件名	参数说明	描述
start	`file`: Object	开始上传 / 文件开始上传 / 继续上传
stop	`file`: Object	暂停上传 / 文件暂停上传
file.enqueue	`file`: Object	文件加入上传队列
file.dequeued	`file`: Object	文件从上传队列被移除
file.progress	`file`: Object, `percentage`: Number	上传过程中触发，携带上传进度。
file.finish	`file`: Object	文件上传完成
file.error	`file`: Object, `error`:Object	文件上传流程出错

# file对象事件

可通过 getFiles() 或监听 uploader 相关事件获取file对象

事件名	参数说明	描述
statuschange	`currentStatus`: String, `previousStatus`: String	文件状态变化

# 文件状态可用信息

inited 初始状态
queued 已经进入队列, 等待上传
progress 上传中
complete 上传完成。
error 上传出错，可重试
interrupt 上传中断，可续传。
invalid 文件不合格，不能重试上传。会自动从队列中移除。
cancelled 文件被移除。

# 事件相关数据信息

# error 消息体

error
- 类型: object
  - error
    - 类型: Number
    - 错误类型编号
  - message
    - 类型: string
    - 错误消息

error: {
    error: 404
    message: 'file not found'
}

# file消息体

file: {
  ext: "zip",  // 文件扩展名，通过文件名获取
  fileId: "4480",   // 上传流程中的outerId
  globalId: "eab83cbc5a254f64a793a823024eb3b7",  // 上传平台资源Id
  hashId: "coursematerial-42/20191129102604-nmpqezf1c2okco00",  // 文件在服务器上的hashId
  id: "WU_FILE_0",  // 文件ID，每个对象具有唯一ID，与文件名无关 ,可用来执行 start(), stop(), getFile()等
  lastModifiedDate: Mon Jun 17 2019 10:03:35 GMT+0800 (中国标准时间) {},  // 文件最后修改日期
  name: "Infragistics_Ultimate_20191_WithSamplesAndHelp.zip",  // 文件名，包括扩展名（后缀）
  size: 2568880244,   // 文件体积（字节）
  source: {}, // 文件资源
  type: "application/zip",  // 文件MIMETYPE类型
}

← 播放器小程序SDK 云资源下载及上传 Android SDK →