一、介紹

• Qiniu-JavaScript-SDK （下文簡稱為 JS-SDK）適用於 ：IE11、Edge、Chrome、Firefox、Safari 等瀏覽器，基於七牛雲端儲存官方 API 構建，其中上傳功能基於 H5 File API。開發者基於 JS-SDK 可以方便的從瀏覽器端上傳檔案至七牛雲端儲存，並對上傳成功後的圖片進行豐富的資料處理操作。 JS-SDK 相容支援 H5 File API 的瀏覽器，在低版本瀏覽器下，需要額外的外掛如 plupload，JS-SDK 提供了一些介面可以結合外掛來進行上傳工作。

二、功能簡介

• 上傳
  
  1. 大於 4M 時可分塊上傳，小於 4M 時直傳
  2. 分塊上傳時，支援斷點續傳
• 圖片處理
  
  1. imageView2（縮圖）
  2. imageMogr2（高階處理，包含縮放、裁剪、旋轉等）
  3. imageInfo （獲取基本資訊）
  4. exif （獲取圖片 EXIF 資訊）
  5. watermark （文字、圖片水印）
  6. pipeline （管道，可對 imageView2、imageMogr2、watermark 進行鏈式處理）

三、引入

• 直接使用靜態檔案地址：https://unpkg.com/[email protected]<version>/dist/qiniu.min.js
• 使用 NPM 安裝
  
  1. npm install qiniu-js
  2. import * as qiniu from ‘qiniu-js’
• 通過原始碼編譯
  ·git clone [email protected]:qiniu/js-sdk.git，進入專案根目錄執行npm install，執行 npm run build，即可在dist目錄生成qiniu.min.js

四、獲取token

• JS-SDK 依賴服務端頒發 token，前端通過介面請求以獲得 token 資訊

五、使用

qiniu.upload 返回一個 observable 物件用來控制上傳行為，observable 對像通過 subscribe 方法可以被 observer 所訂閱，訂閱同時會開始觸發上傳，同時返回一個 subscription 物件，該物件有一個 unsubscribe 方法取消訂閱，同時終止上傳行為。

• Example

var observable = qiniu.upload(file, key, token, putExtra, config)
var subscription = observable.subscribe(observer) // 上傳開始
     // or
var subscription = observable.subscribe(next, error, complete) // 這樣傳參形式也可以
subscription.unsubscribe() // 上傳取消

六、API

• observable: 為一個帶有 subscribe 方法的類例項,observable.subscribe(observer: object)
  observer: observer 為一個 object，用來設定上傳過程的監聽函式，有三個屬性 next、error、complete:

var observer = {
  next(res){ // 接收上傳進度資訊，res 引數是一個帶有 total 欄位的 object，包含loaded(已上傳大小，單位為位元組。)、total(本次上傳的總量)、percent(當前上傳進度，範圍：0～100。)三個屬性，提供上傳進度資訊。 },
  error(err){ // 上傳錯誤後觸發，引數 err 為一個包含 code、message、isRequestError 三個屬性的 object }, 
  complete(res){ // 接收上傳完成後的後端返回資訊，res 引數為一個 object，預設為hash和key, }
}

• file: Blob 物件，上傳的檔案
• key: 檔案資源名,如果 key 為 null 或者 undefined，則檔案資源名會以 hash 值作為資源名。
• token: 上傳驗證資訊，前端通過介面請求後端獲得

• config: object

  • var config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名，為布林值，true 表示使用，預設為 false
region: qiniu.region.z2, //選擇上傳域名區域；當為 null 或 undefined 時，自動分析上傳域名區域
disableStatisticsReport:false, //是否禁用日誌報告，為布林值，預設為false。
retryCount:3, //上傳自動重試次數,預設 3 次
concurrentRequestLimit:3,//分片上傳的併發請求量,預設為3次
checkByMD5:false //是否開啟 MD5 校驗,預設為 false，不開啟。
};

• putExtra:object

  • var putExtra = {
fname: "", //檔案原檔名
params: {},//用來放置自定義變數
mimeType: [] || null //用來限制上傳檔案型別，為 null 時表示不對檔案型別限制；限制類型放到數組裡： ["image/png", "image/jpeg", "image/gif"]
};

七、上傳DEMO

uploadImg(imgSource) {
    const { uptoken } = this.state
    const file = imgSource //Blob 物件，上傳的檔案
    const key = null  // 上傳後文件資源名以設定的 key 為主，如果 key 為 null 或者 undefined，則檔案資源名會以 hash 值作為資源名。

    let config = {
      useCdnDomain: true,   //表示是否使用 cdn 加速域名，為布林值，true 表示使用，預設為 false。
      region: qiniu.region.z0     // 根據具體提示修改上傳地區,當為 null 或 undefined 時，自動分析上傳域名區域
    };

    let putExtra = {
      fname: "",  //檔案原檔名
      params: {}, //用來放置自定義變數
      mimeType: null  //用來限制上傳檔案型別，為 null 時表示不對檔案型別限制；限制類型放到數組裡： ["image/png", "image/jpeg", "image/gif"]
    };

    let observable = qiniu.upload(file, key, uptoken, putExtra, config);
    observable.subscribe({
      next: (res) => {
      // 主要用來展示進度
        let total = res.total;
        window.Qapp.showLoad({content:'上傳圖片中！'})
        // console.log("進度：" + parseInt(total.percent) + "% ")
      },
      error: (err) => {
      // 失敗報錯資訊
        console.log(err)
        window.Qapp.hideLoad()
        window.Qapp.showToast({content:'上傳錯誤！'})
      },
      complete: (res) => {
      // 接收成功後返回的資訊
        window.Qapp.hideLoad()
        console.log(res.hash)
      }
    })
  }

tip:
上傳報400：incorrect region, please use xxxx.qiniu.com為region設定錯誤，修改為提示的地區就可以 官方提示