1. 程式人生 > >六四、使用JS-SDK上傳圖片(檔案)到七牛

六四、使用JS-SDK上傳圖片(檔案)到七牛

一、介紹

  • 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 表示使用,預設為 falseregion: qiniu.region.z0     // 根據具體提示修改上傳地區,當為 nullundefined 時,自動分析上傳域名區域
    };

    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設定錯誤,修改為提示的地區就可以 官方提示