智汇云-智联视界，汇创未来

首页> 开发者中心>云存储>SDK手册>Web上传SDK

### WEB上传SDK说明

WEB端上传SDK适用于通过浏览器（包含移动端）上传视频到智汇云，

适用于嵌入CMS、移动端H5页面上传等场景；

直播云WEB上传SDK，在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，延用原来的FLASH运行时，兼容IE6+，Andorid 4+，IOS 6+。

注意：本文档适合面向考虑使用云存储上传Web SDK进行开发并具备javascript语言基础的开发人员；

WEB上传SDK使用大致流程如下：

![智汇云上传SDK](https://p0.ssl.qhimg.com/t01836061d7a785d684.png)

如上图，需要开发人员获取到Access Key / Secret Access Key，在业务服务端和智汇云服务端验证通过后再进入上传流程，上传时此SDK更关注上传的过程，其他转码参数等属性仍然需要服务端进行交互；

### demo如下

```
<html>
<head>
	<meta charset="utf-8">
	<title></title>
      <link rel="stylesheet" type="text/css" href="https://s5.ssl.qhres.com/!327ba194/webuploader.css">
</head>
<body>
<div>
      <div id="uploader" class="wu-example">
          
          <div id="thelist" class="uploader-list"></div>
          <div class="btns">
              <div id="picker">选择文件</div>
              <button id="ctlBtn" class="btn btn-default">开始上传</button>
          </div>
      </div>

</div>
</body>
<script type="text/javascript" src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript" src="https://s2.ssl.qhres.com/!247c76ff/s3webuploader.js"></script>
<script type="text/javascript">

var uploader = S3WebUploader.create({

// 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',
    swf:"/static/swf/Uploader.swf",
    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一下再上传
    auto: true,
    sendAsBinary: true,
    formData:{},
    compress: false,
    prepareNextFile: true,
    threads: 10,
    fileNumLimit: 10,
    fileSingleSizeLimit: 5000 * 1024 * 1024,
    insertOnly:1,//是否覆盖文件 1覆盖 0不覆盖
    getUploadurl:"/test/oss"
    //此上传地址需要通过从业务服务端获取传入，具体可以参考云点播上传API接口
    
});

uploader.on("fileQueued",(function(file) {
 
}))

uploader.on("uploadSuccess",(function(file) {
  console.log("成功");
}))

uploader.on("uploadBeforeSend",(function(object, data , headers) {
    
}))

uploader.on("uploadError",(function(file, reason) {
  console.log("失败");
  console.log(file);
  console.log(reason);
}))

uploader.on("error",(function(type) {
  console.log(type);
}))

</script>
</html>

```

#### 详细接口说明

S3WebUploader 入口类

var uploader = S3WebUploader.create(obj);
参数说明：

- pick: [默认值：undefined] 指定选择文件的按钮容器，不指定则不创建按钮。
 - swf: flash 文件地址。
 - auto: [默认值：false]是否自动上传。
 - sendAsBinary: [默认值：false]是否以二进制上传。
 - formData: 上传附带的参数。
 - threads: 分片路数，建议在20以内。
 - fileNumLimit: 同时上传文件限制个数。
 - insertOnly: [默认值：1]是否覆盖已有文件 1：覆盖 0：不覆盖
 - getUploadurl: 请求服务端获取上传地址。
 - autoCommit: [默认值：true]分片上传完成后是否自动合并。

### 事件说明：

uploader.on("fileQueued",(function(file) {}))
事件名| 参数说明|描述
---|---|---
beforeFileQueued | file | 当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列。
fileQueued | file | 当文件被加入队列以后触发。
startUpload | |当开始上传流程时触发。
uploadFinished | | 当所有文件上传结束时触发。
uploadStart| file | 某个文件开始上传前触发，一个文件只会触发一次。
uploadBeforeSend| object data headers|当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
uploadProgress| file percentage | 上传过程中触发，携带上传进度。
uploadError| file reason | 当文件上传出错时触发。
uploadSuccess| file response | 当文件上传成功时触发。
uploadComplete| file | 不管成功或者失败，文件上传完成时触发。
getupload-success| file res | 获取到上传地址后触发。
commitSuccess |res| 合并文件完成后触发（如果设置成不自动合并则不触发）
needCommit| uploadresponse| 如果设置为不自动合并 则在需要合并的时候触发
error| type | 当validate不通过时，会以派送错误事件的形式通知调用者。

## upload
upload() ⇒ undefined
upload( file | fileId) ⇒ undefined
开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。

可以指定开始某一个文件。

存储服务

网络加速

企业应用

视频应用

视频工具

内容安全

OCR识别

人脸与人体识别

图像技术

AI开发平台

物联网视频

物联网平台

区块链通用服务

开测平台

运营

视频

物联网

数据上云

IoT设备

账号体系

智慧城市

电商

教育

全屋智能

医疗

智能制造

游戏

云存储

电话咨询：

联系我们

热门产品

帮助文档

服务条款

请您联系我们

给我们留言