一、介紹

Qiniu-JavaScript-SDK （下文簡(jiǎn)稱為 JS-SDK）適用于 ：IE11、Edge、Chrome、Firefox、Safari 等瀏覽器，基于七牛云存儲(chǔ)官方 API 構(gòu)建，其中上傳功能基于 H5 File API。開發(fā)者基于 JS-SDK 可以方便的從瀏覽器端上傳文件至七牛云存儲(chǔ)，并對(duì)上傳成功后的圖片進(jìn)行豐富的數(shù)據(jù)處理操作。 JS-SDK 兼容支持 H5 File API 的瀏覽器，在低版本瀏覽器下，需要額外的插件如 plupload，JS-SDK 提供了一些接口可以結(jié)合插件來進(jìn)行上傳工作。

二、功能簡(jiǎn)介

上傳:

1.大于 4M 時(shí)可分塊上傳，小于 4M 時(shí)直傳
2.分塊上傳時(shí)，支持?jǐn)帱c(diǎn)續(xù)傳

圖片處理:

1.imageView2（縮略圖）
2.imageMogr2（高級(jí)處理，包含縮放、裁剪、旋轉(zhuǎn)等）
3.imageInfo （獲取基本信息）
4.exif （獲取圖片 EXIF 信息）
5.watermark （文字、圖片水?。?br> 6.pipeline （管道，可對(duì) imageView2、imageMogr2、watermark 進(jìn)行鏈?zhǔn)教幚恚?/p>

三、引入

方式1：直接使用靜態(tài)文件地址

地址：https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js

方式2：使用 NPM 安裝

npm install qiniu-js
import * as qiniu from ‘qiniu-js’

方式3：通過源碼編譯

GitHub源碼地址：https://blog.csdn.net/zm06201118/article/details/80537558
·git clone git@github.com:qiniu/js-sdk.git，
下載源碼，打開文件夾進(jìn)入項(xiàng)目根目錄執(zhí)行npm install，執(zhí)行 npm run build，即可在dist目錄生成qiniu.min.js，將qiniu.min.js引入到項(xiàng)目中

七牛源碼地址.png

四、獲取七牛token

獲取七牛token.png

五、使用

qiniu.upload 返回一個(gè) observable 對(duì)象用來控制上傳行為，observable 對(duì)像通過 subscribe 方法可以被 observer 所訂閱，訂閱同時(shí)會(huì)開始觸發(fā)上傳，同時(shí)返回一個(gè) subscription 對(duì)象，該對(duì)象有一個(gè) unsubscribe 方法取消訂閱，同時(shí)終止上傳行為。

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: 為一個(gè)帶有 subscribe 方法的類實(shí)例,observable.subscribe(observer: object)
observer: observer 為一個(gè) object，用來設(shè)置上傳過程的監(jiān)聽函數(shù)，有三個(gè)屬性 next、error、complete:

var observer = {
  next(res){ // 接收上傳進(jìn)度信息，res 參數(shù)是一個(gè)帶有 total 字段的 object，包含loaded(已上傳大小，單位為字節(jié)。)、total(本次上傳的總量)、percent(當(dāng)前上傳進(jìn)度，范圍：0～100。)三個(gè)屬性，提供上傳進(jìn)度信息。 },
  error(err){ // 上傳錯(cuò)誤后觸發(fā)，參數(shù) err 為一個(gè)包含 code、message、isRequestError 三個(gè)屬性的 object }, 
  complete(res){ // 接收上傳完成后的后端返回信息，res 參數(shù)為一個(gè) object，默認(rèn)為hash和key, }
}

七、上傳DEMO

uploadImg(imgSource) {
    const { uptoken } = this.state//你剛獲取到的token
    const file = imgSource //Blob 對(duì)象，上傳的文件
    const key = null  // （上傳后的文件地址）上傳后文件資源名以設(shè)置的 key 為主，如果 key 為 null 或者 undefined，則文件資源名會(huì)以 hash 值作為資源名。

    let config = {
      useCdnDomain: true,   //表示是否使用 cdn 加速域名，為布爾值，true 表示使用，默認(rèn)為 false。
      region: qiniu.region.z0     // 根據(jù)具體提示修改上傳地區(qū),當(dāng)為 null 或 undefined 時(shí)，自動(dòng)分析上傳域名區(qū)域
    };

    let putExtra = {
      fname: "",  //文件原文件名
      params: {}, //用來放置自定義變量
      mimeType: null  //用來限制上傳文件類型，為 null 時(shí)表示不對(duì)文件類型限制；限制類型放到數(shù)組里： ["image/png", "image/jpeg", "image/gif"]
    };

    let observable = qiniu.upload(file, key, uptoken, putExtra, config);
    observable.subscribe({
      next: (res) => {
      // 主要用來展示進(jìn)度
        let total = res.total;
        // console.log("進(jìn)度：" + parseInt(total.percent) + "% ")
      },
      error: (err) => {
      // 失敗報(bào)錯(cuò)信息
        console.log(err)
      },
      complete: (res) => {
        conesole.log(res)//res.key==>圖片名字，和服務(wù)器名字拼接就可以了
        let imgUrl = "http://img.sdfsf.com/." + res.key
        //然后拿著這個(gè)圖片路徑，發(fā)起表單提交請(qǐng)求，保存到對(duì)應(yīng)字段
      }
    })
  }

參考連接：https://blog.csdn.net/zm06201118/java/article/details/80537558