qiniu/js-sdk

Qiniu Cloud JavaScript SDK

Qiniu-JavaScript-SDK

基于七牛 API 开发的前端 JavaScript SDK

当前版本为 3.x，旧版本文档：2.x、1.x

2.x 升级到 3.x 的注意事项请参考 文档

快速导航

• 功能简介
• 准备
• 引入
• 使用
• 运行示例
• 说明
• 常见问题

概述

Qiniu-JavaScript-SDK （下文简称为 JS-SDK）适用于 ：IE11、Edge、Chrome、Firefox、Safari 等浏览器，基于七牛云存储官方 API 构建，其中上传功能基于 H5 File API。开发者基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储，并对上传成功后的图片进行丰富的数据处理操作。 JS-SDK 兼容支持 H5 File API 的浏览器，在低版本浏览器下，需要额外的插件如 plupload，JS-SDK 提供了一些接口可以结合插件来进行上传工作，注意：(在低版本浏览器需要引入 babel-polyfill 来解决 SDK 里某些语法或者属性浏览器不能识别的问题)。

Qiniu-JavaScript-SDK 为客户端 SDK，没有包含 token 生成实现，为了安全，token 建议通过网络从服务端获取，具体生成代码可以参考以下服务端 SDK 的文档。

• Android
• Java
• PHP
• Python
• Ruby
• Go
• Node.js
• C#
• C/C++
• Objective-C

Qiniu-JavaScript-SDK 的示例 Demo 中的服务器端部分是基于 Node.js 服务器端 SDK 开发的。

• JavaScript SDK 在线示例 V3
• JavaScript SDK 在线示例 V2

功能简介

• 上传
  • 大于 4M 时可分块上传，小于 4M 时直传
  • 分块上传时，支持断点续传
• 数据处理（图片）
  • imageView2（缩略图）
  • imageMogr2（高级处理，包含缩放、裁剪、旋转等）
  • imageInfo （获取基本信息）
  • exif （获取图片 EXIF 信息）
  • watermark （文字、图片水印）
  • pipeline （管道，可对 imageView2、imageMogr2、watermark 进行链式处理）

准备

• 在使用 JS-SDK 之前，您必须先注册一个七牛帐号，并登录控制台获取一对有效的 AccessKey 和 SecretKey，您可以阅读 快速入门 和 安全机制 以进一步了解如何正确使用和管理密钥 。

• JS-SDK 依赖服务端颁发 token，可以通过以下二种方式实现：

  • 利用 七牛服务端 SDK 构建后端服务
  • 利用七牛底层 API 构建服务，详见七牛 上传策略 和 上传凭证

  前端通过接口请求以获得 token 信息

引入

支持以下几种安装方式

• 直接使用静态文件地址：

  https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/<version>/qiniu.min.js
  
  // 当上方资源链接访问不稳定时，可选使用下方资源链接
  https://cdn.staticfile.org/qiniu-js/<version>/qiniu.min.js
  

  通过 script 标签引入该文件，会在全局生成名为 qiniu 的对象

• 使用 NPM 安装

  NPM 的全称是 Node Package Manager，是一个 NodeJS 包管理和分发工具，已经成为了非官方的发布 Node 模块（包）的标准。如果需要更详细的关于 NPM 的使用说明，您可以访问 NPM 官方网站，或对应的 中文网站

  npm install qiniu-js

  const qiniu = require('qiniu-js')
  // or
  import * as qiniu from 'qiniu-js'

• 通过源码编译

git clone [email protected]:qiniu/js-sdk.git，进入项目根目录执行 npm install ，执行 npm run build，即可在dist 目录生成 qiniu.min.js。

使用

qiniu.upload 返回一个 observable 对象用来控制上传行为，observable 对像通过 subscribe 方法可以被 observer 所订阅，订阅同时会开始触发上传，同时返回一个 subscription 对象，该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。对于不支持 SDK 的浏览器可以参考 demo1 中用插件处理和 form 直传的方式； 一般 form 提交常常会导致网页跳转，demo1 中 form 直传通过加入 iframe，并结合后端 SDK 上传来解决网页跳转问题，实现 form 无刷新上传。分片上传时，JS-SDK支持断点续传功能，会把已上传片的后端返回值ctx信息存储到本地，有效期为一天，超过一天后，当继续上传该文件时会清除掉本地存储信息重新上传。

Example

文件上传：

const observable = qiniu.upload(file, key, token, putExtra, config)

const subscription = observable.subscribe(observer) // 上传开始
// or
const subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以

subscription.unsubscribe() // 上传取消

图片上传前压缩：

const options = {
  quality: 0.92,
  noCompressIfLarger: true
  // maxWidth: 1000,
  // maxHeight: 618
}
qiniu.compressImage(file, options).then(data => {
  const observable = qiniu.upload(data.dist, key, token, putExtra, config)
  const subscription = observable.subscribe(observer) // 上传开始
})

API Reference Interface

qiniu.upload(file: File, key: string, token: string, putExtra?: object, config?: object): observable

• observable: 为一个带有 subscribe 方法的类实例

  • observable.subscribe(observer: object): subscription

    • observer: observer 为一个 object，用来设置上传过程的监听函数，有三个属性 next、error、complete:

      const observer = {
        next(res){
          // ...
        },
        error(err){
          // ...
        },
        complete(res){
          // ...
        }
      }

      • next: 接收上传进度信息的回调函数，回调函数参数值为 object，包含字段信息如下：

        • uploadInfo: object，只有分片上传时才返回该字段
          • uploadInfo.id: 上传任务的唯一标识。
          • uploadInfo.url: 上传地址。
        • chunks: Array<ProgressCompose> 每个 chunk 的上传信息，只有分片上传有此字段
          • ProgressCompose 的信息如下
            • size: number chunk 的尺寸
            • loaded: number 已经发送完毕的尺寸
            • percent: number 进度比例，范围在 0 - 100
            • fromCache?: boolean 是否是来自缓存
        • total: 包含 loaded、total、percent 三个属性:
          • total.loaded: number，已上传大小，单位为字节。
          • total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
          • total.percent: number，当前上传进度，范围：0～100。

      • error: 上传错误后触发；自动重试本身并不会触发该错误，而当重试次数到达上限后则可以触发。当不是 xhr 请求错误时，会把当前错误产生原因直接抛出，诸如 JSON 解析异常等；当产生 xhr 请求错误时，参数 err 的类型为 QiniuError, 对于请求错误，err 的类型为 QiniuRequestError(继承自QiniuError)，如果是由于非服务端原因发生错误时（例如断网、跨域等等），错误的类型为 QiniuNetworkError(继承自QiniuRequestError)。

        • QiniuError
          • name: QiniuErrorName 错误的类型。
          • message: string 错误的信息。
          • stack: string 调用堆栈信息。
        • QiniuRequestError 继承自 QiniuError
          • data: any 服务端返回的错误信息，如果不是标准的 json 格式，则该字段为 undefined。
          • reqId: string xhr 请求错误的 X-Reqid。
          • code: number 请求错误状态码，可查阅码值对应 说明。
          • isRequestError: 固定为 true，不推荐使用，即将废弃。
        • QiniuNetworkError 继承自 QiniuRequestError
          • reqId: 由于请求可能还未真正发出，所以可能无法收集到 reqId，该字段可能为 ''。

      • complete: 接收上传完成后的后端返回信息，具体返回结构取决于后端 SDK 的配置，可参考 上传策略。

    • subscription: 为一个带有 unsubscribe 方法的类实例，通过调用 subscription.unsubscribe() 停止当前文件上传。

• bucket: 上传的目标空间

• file: File 对象，上传的文件

• key: 文件资源名，为空字符串时则文件资源名也为空，为 null 或者 undefined 时则自动使用文件的 hash 作为文件名

• token: 上传验证信息，前端通过接口请求后端获得

• config: object，其中的每一项都为可选

  const config = {
    useCdnDomain: true,
    region: qiniu.region.z2
  };

  • config.useCdnDomain: 表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 true。
  • config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为 false。
  • config.uphost: 上传 host，类型为 string[] | string，如果指定一个非空数组或者非空字符串，则仅使用该数据作为上传 host，默认为 []，传入多个 host 时，内部会在重试过程中根据情况自动切换不同的 host。
  • config.upprotocol: 自定义上传域名协议，值为 https 或者 http，默认为 https。
  • config.region: 选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域，当指定了 uphost 时，此设置项无效。
  • config.retryCount: 上传自动重试次数（整体重试次数，而不是某个分片的重试次数）；默认 3 次（即上传失败后最多重试两次）。
  • config.concurrentRequestLimit: 分片上传的并发请求量，number，默认为3；因为浏览器本身也会限制最大并发量，所以最大并发量与浏览器有关。
  • config.checkByServer: 是否开启服务端文件签名校验，为布尔值；开启后在文件上传时会计算本地的文件签名，服务端会根据本地的签名与接收到的数据的签名进行比对，如果不相同、则说明文件可能存在问题，此时会返回错误（code: 406），默认为 false，不开启。
  • config.checkByMD5: 是否开启 MD5 校验，为布尔值；在断点续传时，开启 MD5 校验会将已上传的分片与当前分片进行 MD5 值比对，若不一致，则重传该分片，避免使用错误的分片。读取分片内容并计算 MD5 需要花费一定的时间，因此会稍微增加断点续传时的耗时，默认为 false，不开启。
  • config.forceDirect: 是否上传全部采用直传方式，为布尔值；为 true 时则上传方式全部为直传 form 方式，禁用断点续传，默认 false。
  • config.chunkSize: number，分片上传时每片的大小，必须为正整数，单位为 MB，且最大不能超过 1024，默认值 4。因为 chunk 数最大 10000，所以如果文件以你所设的 chunkSize 进行分片并且 chunk 数超过 10000，我们会把你所设的 chunkSize 扩大二倍，如果仍不符合则继续扩大，直到符合条件。
  • config.debugLogLevel: INFO | WARN | ERROR | OFF，允许程序在控制台输出日志，默认为 OFF，不输出任何日志，本功能仅仅用于本地调试，不建议在线上环境开启。

• putExtra: object，其中的每一项都为可选

  const putExtra = {
    fname: "qiniu.txt",
    mimeType: "text/plain",
    customVars: { 'x:test': 'qiniu', ... },
    metadata: { 'x-qn-meta': 'qiniu', ... },
  };

  • fname: string，文件原始文件名，若未指定，则魔法变量中无法使用 fname、ext、suffix
  • customVars: object，用来放置自定义变量，变量名必须以 x: 开始，自定义变量格式及说明请参考 文档
  • metadata: object，用来防止自定义 meta，变量名必须以 x-qn-meta-开始，自定义资源信息格式及说明请参考 文档
  • mimeType: string，指定所传的文件类型

qiniu.region: object

• qiniu.region.z0: 代表华东区域
• qiniu.region.z1: 代表华北区域
• qiniu.region.z2: 代表华南区域
• qiniu.region.na0: 代表北美区域
• qiniu.region.as0: 代表新加坡区域

qiniu.getUploadUrl(config: object, token: string): Promise

接收参数为 config 对象，返回根据 config 里所配置信息的上传域名

qiniu.getUploadUrl(config, token).then(res => {}) // res 即为上传的 url

qiniu.getHeadersForChunkUpload(token: string): object

返回 object，包含用来获得分片上传设置的头信息，参数为 token 字符串；当分片上传时，请求需要带该函数返回的头信息

• token: 后端返回的上传验证信息

  const headers = qiniu.getHeadersForChunkUpload(token)

qiniu.deleteUploadedChunks(token: string, key: stting, uploadInfo: object): Promise

删除指定上传任务中已上传完成的片，key 为目标文件名，uploadInfo 可通过 next 的返回获取，token 由服务端生成

qiniu.compressImage(file: File, options: object): Promise (上传前图片压缩)

在 v3.3.3 版本之前，该压缩行为会根据图片的 Orientation(设备角度) 信息对图片进行旋转处理，详细的信息可以参考 issue：关于 canvas 绘制图像的方向兼容处理

const imgLink = qiniu.compressImage(file, options).then(res => {
  // res : {
  //   dist: 压缩后输出的 Blob 对象或原始的 File 对象，具体看下面的 options 配置
  //   width: 压缩后的图片宽度
  //   height: 压缩后的图片高度
  // }
  }
})

• file: 要压缩的源图片，为 File 对象，支持 image/png、image/jpeg、image/bmp、image/webp 这几种图片类型
• options: object
  • options.quality: number，图片压缩质量，在图片格式为 image/jpeg 或 image/webp 的情况下生效，其他格式不会生效，可以从 0 到 1 的区间内选择图片的质量。默认值 0.92
  • options.maxWidh: number，压缩图片的最大宽度值
  • options.maxHeight: number，压缩图片的最大高度值 （注意：当 maxWidth 和 maxHeight 都不设置时，则采用原图尺寸大小）
  • options.noCompressIfLarger: boolean，为 true 时如果发现压缩后图片大小比原来还大，则返回源图片（即输出的 dist 直接返回了输入的 file）；默认 false，即保证图片尺寸符合要求，但不保证压缩后的图片体积一定变小
• CompressResult: object，包含如下字段：
  • dist: 压缩后输出的 Blob 对象或原始的 File 对象
  • width: 压缩后的图片宽度
  • height: 压缩后的图片高度

qiniu.watermark(options: object, key?: string, domain?: string): string（水印）

返回添加水印后的图片地址

• key : 文件资源名

• domain: 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取，前端可以通过接口请求后端得到

  const imgLink = qiniu.watermark({
       mode: 1, // 图片水印
       image: 'http://www.b1.qiniudn.com/images/logo-2.png', // 图片水印的Url，mode = 1 时 **必需**
       dissolve: 50, // 透明度，取值范围1-100，非必需，下同
       gravity: 'SouthWest', // 水印位置，为以下参数 [NorthWest、North、NorthEast、West、Center、East、SouthWest、South、SouthEast] 之一
       dx: 100,  // 横轴边距，单位:像素(px)
       dy: 100 // 纵轴边距，单位:像素(px)
   }, key, domain)
  
  // imgLink 可以赋值给 html 的 img 元素的 src 属性，下同
  
  // 若未指定key，可以通过以下方式获得完整的 imgLink，下同
  // imgLink  =  '<domain>/<key>?' +  imgLink
  // <domain> 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
  
  // 或者
  
  const imgLink = qiniu.watermark({
       mode: 2,  // 文字水印
       text: 'hello world !', // 水印文字，mode = 2 时 **必需**
       dissolve: 50,          // 透明度，取值范围1-100，非必需，下同
       gravity: 'SouthWest',  // 水印位置，同上
       fontsize: 500,         // 字体大小，单位: 缇
       font: '黑体',           // 水印文字字体
       dx: 100,               // 横轴边距，单位:像素(px)
       dy: 100,               // 纵轴边距，单位:像素(px)
       fill: '#FFF000'        // 水印文字颜色，RGB格式，可以是颜色名称
   }, key, domain)

  options包含的具体水印参数解释见 水印（watermark）

qiniu.imageView2(options: object, key?: string, domain?: string): string (缩略)

返回处理后的图片url

const imgLink = qiniu.imageView2({
   mode: 3,       // 缩略模式，共 6 种 [0-5]
   w: 100,        // 具体含义由缩略模式决定
   h: 100,        // 具体含义由缩略模式决定
   q: 100,        // 新图的图像质量，取值范围：1-100
   format: 'png'  // 新图的输出格式，取值范围：jpg，gif，png，webp 等
 }, key, domain)

options包含的具体缩略参数解释见 图片基本处理（imageView2）

qiniu.imageMogr2(options: object, key?: string, domain?: string): string (图像高级处理)

返回处理后的图片url

const imgLink = qiniu.imageMogr2({
   "auto-orient": true,      // 布尔值，是否根据原图EXIF信息自动旋正，便于后续处理，建议放在首位。
   strip: true,              // 布尔值，是否去除图片中的元信息
   thumbnail: '1000x1000'    // 缩放操作参数
   crop: '!300x400a10a10',   // 裁剪操作参数
   gravity: 'NorthWest',     // 裁剪锚点参数
   quality: 40,              // 图片质量，取值范围1-100
   rotate: 20,               // 旋转角度，取值范围1-360，缺省为不旋转。
   format: 'png',            // 新图的输出格式，取值范围：jpg，gif，png，webp等
   blur: '3x5'               // 高斯模糊参数
 }, key, domain)

options包含的具体高级图像处理参数解释见 图像高级处理（imageMogr2）

qiniu.imageInfo(key: string, domain: string): Promise

qiniu.imageInfo(key, domain).then(res => {})

具体 imageInfo 解释见 图片基本信息（imageInfo）

qiniu.exif(key: string, domain: string): Promise

qiniu.exif(key, domain).then(res => {})

具体 exif 解释见 图片 EXIF 信息（exif）

qiniu.pipeline(fopArr: array, key?: string, domain?: string): string

const fopArr = [{
    fop: 'watermark', // 指定watermark操作
    mode: 2,          // 此参数同watermark函数的参数，下同。
    text: 'hello world !',
    dissolve: 50,
    gravity: 'SouthWest',
    fontsize: 500,
    font : '黑体',
    dx: 100,
    dy: 100,
    fill: '#FFF000'
},{
    fop: 'imageView2', // 指定imageView2操作
    mode: 3,           // 此参数同imageView2函数的参数，下同
    w: 100,
    h: 100,
    q: 100,
    format: 'png'
},{
    fop: 'imageMogr2',  // 指定imageMogr2操作
    "auto-orient": true,  // 此参数同imageMogr2函数的参数，下同。
    strip: true,
    thumbnail: '1000x1000'
    crop: '!300x400a10a10',
    gravity: 'NorthWest',
    quality: 40,
    rotate: 20,
    format: 'png',
    blur:'3x5'
}]

// fopArr 可以为三种类型'watermark'、'imageMogr2'、'imageView2'中的任意1-3个
// 例如只对'watermark'、'imageMogr2'进行管道操作，则如下即可
// const fopArr = [{
//    fop: 'watermark', // 指定watermark操作
//    mode: 2, // 此参数同watermark函数的参数，下同。
//    text: 'hello world !',
//    dissolve: 50,
//     gravity: 'SouthWest',
//     fontsize: 500,
//     font : '黑体',
//     dx: 100,
//     dy: 100,
//     fill: '#FFF000'
// },{
//    fop: 'imageMogr2',  // 指定imageMogr2操作
//    "auto-orient": true,  // 此参数同imageMogr2函数的参数，下同。
//    strip: true,
//    thumbnail: '1000x1000'
//    crop: '!300x400a10a10',
//    gravity: 'NorthWest',
//    quality: 40,
//    rotate: 20,
//    format: 'png',
//    blur:'3x5'
// }];

const imgLink = qiniu.pipeline(fopArr, key, domain))

fopArr包含的具体管道操作解释见 管道操作

运行示例

1. 进入 test 目录，按照目录下的 config.json.example 示例，创建 config.json 文件，其中，Access Key 和 Secret Key 按如下方式获取

   • 开通七牛开发者帐号
   • 登录七牛开发者自助平台，查看 AccessKey 和 SecretKey 。

   {
     "AccessKey": "<Your Access Key>",
     "SecretKey": "<Your Secret Key>",
     "Bucket": "<Your Bucket Name>",
     "Port": 9000,
     "UptokenUrl": "<Your Uptoken_Url>", // demo 启动后会在本地 /uptoken 上提供获取 uptoken 的接口，所以这里可以填 'token'
     "Domain": "<Your Bucket Domain>" // Bucket 的外链默认域名，在 Bucket 的内容管理里查看，如：'http://xxx.bkt.clouddn.com/'
   }

2. 进入项目根目录，执行 npm install 安装依赖库，然后打开两个终端，一个执行 npm run serve 跑 server， 一个执行 npm run dev 运行服务；demo1：http://0.0.0.0:8080/test/demo1；demo3：http://0.0.0.0:8080/test/demo3；demo1为测试上传功能的示例，demo3为测试图片压缩功能的示例；demo2 为测试 es6 语法的示例，进入 demo2 目录，执行 npm install，然后 npm start 运行 demo2；demo1、demo2 和 demo3 都共用一个 server，请注意 server 文件里的 region 设置跟 config 里的region 设置要保持一致。

说明

1. 如果您想了解更多七牛的上传策略，建议您仔细阅读 七牛官方文档-上传。另外，七牛的上传策略是在后端服务指定的.

2. 如果您想了解更多七牛的图片处理，建议您仔细阅读 七牛官方文档-图片处理

3. JS-SDK 示例生成 token 时，指定的 Bucket Name 为公开空间，所以可以公开访问上传成功后的资源。若您生成 token 时，指定的 Bucket Name 为私有空间，那您还需要在服务端进行额外的处理才能访问您上传的资源。具体参见 下载凭证。JS-SDK 数据处理部分功能不适用于私有空间。

常见问题

1. 关于上传文件命名问题，可以参考：

1. 上传的 scope 为 bucket 的形式，上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
2. 上传的 scope 为 bucket:key 的形式，上传文件本地的名字需要和 scope 中的 key 是一致的，不然会报错 key doesn‘t match with scope。
3. 上传的 scope 为 bucket，但是 token 中有设定 saveKey，这种形式下客户端的 key 如果设定为 null 或者 undefined，则会以 saveKey 作为文件资源名，否则仍然是以 key 值作为资源名，并且上传的本地文件名也是需要和这个 savekey 文件名一致的。

2. 限制上传文件的类型：

通过在生成 token 时指定 上传策略 中的 mimeLimit 字段限定上传文件的类型，该功能由生成 token 的服务端 SDK 提供，请查看对应的服务端 SDK 文档。

贡献代码

1. 登录 https://github.com

2. Fork [email protected]:qiniu/js-sdk.git

3. 创建您的特性分支 (git checkout -b new-feature)

4. 提交您的改动 (git commit -am 'Added some features or fixed a bug')

5. 将您的改动记录提交到远程 git 仓库 (git push origin new-feature)

6. 然后到 github 网站的该 git 远程仓库的 new-feature 分支下发起 Pull Request

许可证

Copyright (c) 2018 qiniu.com

基于 MIT 协议发布

js-sdk's Issues

请问下，这个js-sdk有办法下载私有资源么？

RT

auto_start: false若关闭需要自己绑定事件

若关闭需要自己绑定事件触发上传应该，调用哪个方法start吗？

调用addFile 的接口无效

我没有设置browse_button（设置了无效的值）, 而是通过plupload提供的addFile 方法， 来添加文件。 但是发现addFile之后 uploader.files 仍然为一个空的数组。

请问这是一个bug还是qiniu sdk前端只能通过browse_button来上传呢？

如果想实现addFile 后上传的目的该如何做呢？

谢谢啦 🐱

采用这个JS后，plupload的图片本地resize功能无法使用了。

采用这个JS后，plupload的图片本地resize功能无法使用了。

uptoken_url这样的设计，会导致跨域拿token有些问题。

现在有个问题。uptoken获取，是通过url的。但是这样，其实并没有很好的支持跨域。我们现在的需求是，我们的client端是向另外一个server请求uptoken。但是因为你在send之前，set了if-modified-since这个header。这样会导致xmlrequest发送跨域请求的时候，把请求的method修改成options。我这块不是非常熟悉，想询问一下这样做是为何？如果是为了防止浏览器缓存，可以通过别的方式绕过么？

还有，sdk本身可以提供一个setToken接口之类的。直接让使用者提供uptoken_url，会不会不是一个很好的方案？

window.URL.createObjectURL(file) 出错

在BeforeUpload调用得到如下错误
Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided

看了下是返回的file对象不是File类型的，请问下有可以获得选中的File对象的接口吗？

文件上传前检查，如果不符合规则则取消上传

我们的项目需要在 BeforeUpload 里对文件进行一些简单的检查，如果不符合规则就不上传文件，现在似乎没有这样的办法啊

请问flash_swf_url调用绝对地址，跨域的时候怎么办

请问flash_swf_url调用绝对地址，跨域的时候怎么办

文档中语病太多

比如这两句，看了几遍没看懂：

    // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
    // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理

重新整理下吧！

trim未做兼容处理

qiniu.js 220行this.trim = function(text) {
return text === null ? "" : this.trim.call(text);
};
在低版本浏览器会出现报错

react-qiniu 七牛 React 上传组件

repo url: https://github.com/lenage/react-qiniu

Android使用分片上传功能报错。

试了下，官方的Sample也是会报错的。 试了同事的Android手机，问题同样存在。
只要大于4M的图片，上传就会出这个问题，测试了微信内webview和自带浏览器，都报同样错误。

截图如下：

readme中合并一些常见js问题需求

总结了一部分js sdk常见的问题: http://blog.csdn.net/netdxy/article/details/50507161
希望可以合并到readme中

上传文件fileuploaded事件在ie6,7下可能不触发

可能原因是ie6,7无json对象，建议给用户提示

https 网站的上传会被chrome block

chrome 反馈为 "此网页正试图从未经验证的来源加载脚本"
所以建议新增一个 qiniu.ssl.min.js, 将sdk中所有的 http://up.qiniu.com, 改为 https://.....

初始化控件后，长时间停留在页面上的话，会无法上传

应该是 token 过期了，可以设置 token 过期时间吗？或者加个方法可以 destroy，然后每次点击按钮的时候再初始化并获取 token

建议增加 unique_name和save_key配置正确性校验

https://github.com/qiniu/js-sdk/blob/master/src/qiniu.js#L298
按照文档中提到

'Key': function(up, file) {
 // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
 // 该配置必须要在 unique_names: false , save_key: false 时才生效

 var key = "";
 // do something with key here
 return key
 }

既然配置有冲突，我觉得不应该按照“默认”做法，就应该明显地报错，说配置有冲突。

谢谢。

可否增加是否允许选择多个文件的配置呢？

可否增加是否允许选择多个文件的配置呢？
有时候想只允许用户一次上传一个文件！

browse_button初始化问题

如果browse_button的父元素A一开始处于display:none状态，初始化完成后在显示A则导致browse_button无法工作，发现在这种情况系初始化时会导致browse_button的覆盖元素位置及大小出错，有木有函数做修正位置用的?

请问怎么上传到指定的路径？

如题。。。

示例网站打不开

需要内网么？

是否支持https协议上传

该SDK源码里，上传地址都硬编码为固定http协议的上传地址了，是否支持https协议的上传？

如果应用自身使用HTTPS部署的话，使用该SDK会导致浏览器无法上传的问题。。。

如何在AngularJS使用该sdk

我是自己创建了一个directive

app.directive('qnInput', function() {
    "use strict";

    Qiniu.uploader({
        runtimes: 'html5,flash,html4',
        browse_button: 'pickfiles',
        max_file_size: '20mb',
        uptoken_url: '/file/gettoken',
        auto_start: true,
        init: {
            'FilesAdded': function(up, files) {
                console.log(files[0]);
            },
            'UploadProgress': function(up, file) {
                console.log(file.percent, file.speed);
            },
            'FileUploaded': function(up, file, info) {
                console.log(info);
            },
            'Error': function(up, err, errTip) {
                console.log(err);
                console.log(errTip);
            }
        }
    });

    return {
        restrict: 'E',
        template: '<input type="file" name="form.file" id="pickfiles">',
        replace: 'true'
    };
});

但是console提示

uptoken_url or domain is required!

因为我不需要用到下载，所以就没设置domain。但是uptoken_url已经设置了，还是提示required。

IE8 html4上传没法获取返回值

在demo里面IE8（准确说应该是 IE11 用开发者工具 模拟的 IE8）上传成功，但是返回值无法访问，上传之后只是提示我 是否保存 xxxxxxx.json 文件，所以无法知道是否上传成功，但是我在空间上面检查发现确实上传了。有什么办法解决？？

max_file_size案例中设置有问题

在些咱们是引用的plupload的校验
我们应该这样配置：

@param {Object} [settings.filters={}] Set of file type filters.

@param {Array} [settings.filters.mime_types=[]] List of file types to accept, each one defined by title and list of extensions. e.g. {title : "Image files", extensions : "jpg,jpeg,gif,png"}. Dispatches plupload.FILE_EXTENSION_ERROR
@param {String|Number} [settings.filters.max_file_size=0] Maximum file size that the user can pick, in bytes. Optionally supports b, kb, mb, gb, tb suffixes. e.g. "10mb" or "1gb". By default - not set. Dispatches plupload.FILE_SIZE_ERROR.
@param {Boolean} [settings.filters.prevent_duplicates=false] Do not let duplicates into the queue. Dispatches plupload.FILE_DUPLICATE_ERROR.

请支持 https 上传

https://up.qbox.me

如何用browserify使用七牛js-sdk？

怎么在angularjs框架中使用

angular中怎么使用，我按照例子中的写了，但是没得反应

Sample Site not working

the sample site: http://jssdk.demo.qiniu.io/ is not working, I can see js error in console

OPTIONS http://up.qiniu.com/ net::ERR_EMPTY_RESPONSE plupload.full.min.js:14
Uncaught SyntaxError: Unexpected end of input

The same issue happen in my own site, please take a look

小米默认浏览器，无法上传

虽然是浏览器有问题，但是如何解决呢？ 😿

关于WEB客户端获取数据问题

用WEB直传的方式上传文件， 如果设置了callbackUrl的话，上传文件成功之后你们只返回了一个"success"的字符串，完全没有返回hash和key，你们这让客户端如何回显图片呢？
我表示很郁闷啊！

请求加入 bower 仓库

和 php-sdk 加入 packagist 一样，是否可以把 js-sdk 也加入 bower 呢？这样就可以用 bower 来安装 qiniu-js-sdk 啦。谢谢你们哦~~~

Sasari中无法添加文件

按照Demo写了个测试页面，发现chrome下正常，但用iPhone和iPad点击添加文件没有反应，用chrome仿真iPhone也是同样情况，看URL是直接打开了pickfiles这个A标签的href,是不是plupload没有初始化成功？plupload qiniusdk都是直接copyDemo里的，请问是什么问题呢？

imageView2有关图片质量的参数失效

按 readme 中的示例，控制图片质量的参数应该传入 q，但现有代码这个参数不起作用。

自定义变量 x_vals 是还不可以使用么，没看到对x_vals的处理

如何设置 Timeout？

你好，上传的时候如果有个文件收不到 response，就会一直在那里等，也不会开始下一个文件的上传，我如何设置 timeout 呢？

页面上多个上传文件控件时的问题

我的项目里同一个页面有多个上传文件的按钮，此时如果用 SDK 初始化控件，上传文件时传的 key 和 token 都是最后一个初始化的控件的，其他的按钮相当于没有起作用。

有没有办法让上传的key就是hash值来避免重复上传？

我试了unique_names: true，但这个也只是给文件生成一个唯一的文件名，重复的文件还是会生成多份，很占空间。有没有选项和办法让上传的key就是hash值？

我用iOS SDK的时候不设定key是直接设成hash的，但JavaScript没有找到类似方法。

2.1.5版本plupload导致sdk上传失败

初步定位:556 的FileUploaded执行两次，第二次无法取到file.size值，导致:594 ‘http://up.qiniu.com/mkfile/' + file.size路径错误

plupload降级为2.1.1版本后，无此错误

Plupload 许可证问题

Plupload 许可证是 GPLv2 或购买商业授权，这样是不是应用 qiniu-js-sdk 到商业项目还要购买 Plupload 的商业授权？

如果是的话最好换个上传插件，比如 jQuery-File-Upload 是 MIT 的。

js-sdk中貌似没有对303的重定向处理

js-sdk中貌似没有对303的重定向处理,配置了returnUrl，返回值是303的话请问怎么处理呢

支持多文件同时上传吗？

如果不支持，理论上能支持多文件并行上传吗，如果能，计划支持吗

为什么一定要跟Plupload绑定呢？这样不能直接从手机摄像头获取图片了

有没有提供直接上传文件的接口而不用绑定Plupload？用了Plupload我在手机端就不能拍照上传了。

我上传到自己的服务都是用 ng-file-upload 的，我能不能用ng-file-upload自己上传到七牛呢？

使用requirejs后的getOption 错误

这里使用了requirejs 。

requirejs.config({
    appDir:"/static/js",
    paths:{
        'jquery':"/static/bower_components/jquery/dist/jquery.min",
        "plupload":"/static/bower_components/plupload-bower/js/plupload.full",
        "qiniu":"/static/js/qiniu"
    },
    shim:{
        'plupload':{"exports":"plupload"},
        'qiniu':{"exports":"Qiniu"}
    }
})

require(["jquery", "plupload", "qiniu"],
    function($, plupload, qiniu){
        var uploader = qiniu.uploader({
            runtimes:"html5",
            browse_button:"pickfiles",
            uptoken_url:"/api/qiniu/uptoken/tratao",
            domain:"tratao.qiniu.com",
            container:"container",
            max_retries:3,
            dragdrop:true,
            drop_element:container,
            chunk_size: '4mb',
            auto_star:true,
            init:{
                'FilesAdded': function(up, files) {
                    console.log(up)
                    plupload.each(files, function(file) {
                        //文件添加进队列后,处理相关的事情
                    });
                },
                'BeforeUpload': function(up, file) {
                    //每个文件上传前,处理相关的事情
                },
                'UploadProgress': function(up, file) {
                    //每个文件上传时,处理相关的事情
                },
                'FileUploaded': function(up, file, info) {
                    //每个文件上传成功后,处理相关的事情
                    //其中 info 是文件上传成功后，服务端返回的json，形式如
                    // {
                    //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                    //    "key": "gogopher.jpg"
                    //  }
                    // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                   // var domain = up.getOption('domain');
                   // var res = parseJSON(info);
                   // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
               },
               'Error': function(up, err, errTip) {
                   //上传出错时,处理相关的事情
               },
               'UploadComplete': function() {
                   //队列文件处理完毕后,处理相关的事情
               }
            }
        }
    )}
)

提示 qiniu.js:283 错误，up.getOption 不存在。看了一下log出来的up对象，确实没有。这里应该是requirejs做shim设定的时候制定的plupload对象不对。

为什么没有获取图片的API？

line 243: Uncaught TypeError: Cannot set property 'Error' of undefined

How to reproduce:

1. require the script

Plupload

亲，我觉得应该对Plupload做一些修改，因为比如Plupload自带的moxie的flash控件就是有跨域调用问题，我使用的时候是改了Moxie的源码重编译的，这样swf控件才能和站点的domain分离开。毕竟现在用IE8的人还不少，希望考虑一下

plupload的mime_types属性怎么设置？

是要像plupload这样设置
filters: {
mime_types : [
{ title : "Image files", extensions : "jpg,gif,png" },
{ title : "Zip files", extensions : "zip" }
]
}
还是直接设置呢?
例如：
mime_type:[
{ title : "Image files", extensions : "jpg,gif,png" },
{ title : "Zip files", extensions : "zip" }
]

生成key第一个字符为/时的链接问题

生成的key为/150724/16/1031/150724_161031_GcP7zF4J.jpg，链接有一个@，替换不全面～
http://7xkfbr.com2.z0.glb.qiniucdn.com/@/150724/16/1031/150724_161031_GcP7zF4J.jpg

sdk setOption问题以及Plupload相关回调函数问题

因为当前的sdk是基于Plupload开发的。我先说我的需求，再说因为这个需求引出的两个问题。

因为当前sdk默认是没有指定key的。因此上传成功后资源地址会变成，xxx/filename.jpg这样的格式。但是我们希望提前做一些预处理，保证资源地址唯一，同时还方便文件下载后校验。因此希望资源url变成，xxx/md5.jpg这样的格式。现在就出现了两个问题：

1. 因为使用了Plupload的API，qiniu-js-sdk里面对相应的回调函数封装得特别混乱。而浏览器的读取文件api又是异步的。我的需求其实是先通过FileReader读取文件，计算md5。但是，异步的md5计算我都不知道如何插到相应的回调里面去。样例里面说auto_start设置为False可以自己手动绑定事件。但是，qiniu-sdk本身封装得太复杂了。代码我研究了半天，我不确定要怎么绑定比较好。
2. 上传策略 http://developer.qiniu.com/docs/v6/api/reference/security/put-policy.html 里面是有着非常多的参数的。对应到当前sdk里面则是通过setOption来修改。但是，首先，那几个回调很复杂，我不知道setOption的官方建议位置在哪里。因为好几个地方其实都set不上去。还附带出一个奇怪的问题。我当前setOption之后，目的是想把key修改成md5.jpg这种形式。但是浏览器会拦截我那个request，报出，「Caution provisional headers are shown」这样的错误。

这是我的业务代码，只是一些上传逻辑，放在这里没有问题：

1. 我为了绕过异步问题的代码。https://gist.github.com/anonymous/9613036#file-main-coffee-L49
2. 我的setOption代码。https://gist.github.com/anonymous/9613036#file-main-coffee-L39

非常希望你能够帮忙解决。这些事情，浪费了我很多时间。