使用JavaScript-SDK上傳文件（圖片）到七牛

一、介紹

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

二、功能簡介

上傳:

1.大于 4M 時可分塊上傳锹淌，小于 4M 時直傳
2.分塊上傳時匿值，支持斷點續(xù)傳

圖片處理:

1.imageView2（縮略圖）
2.imageMogr2（高級處理，包含縮放赂摆、裁剪挟憔、旋轉(zhuǎn)等）
3.imageInfo （獲取基本信息）
4.exif （獲取圖片 EXIF 信息）
5.watermark （文字、圖片水友毯拧）
6.pipeline （管道绊谭，可對 imageView2、imageMogr2汪拥、watermark 進行鏈式處理）

三达传、引入

方式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，
下載源碼，打開文件夾進入項目根目錄執(zhí)行npm install趟大，執(zhí)行 npm run build鹤树，即可在dist目錄生成qiniu.min.js，將qiniu.min.js引入到項目中

七牛源碼地址.png

四逊朽、獲取七牛token

獲取七牛token.png

五罕伯、使用

qiniu.upload 返回一個 observable 對象用來控制上傳行為，observable 對像通過 subscribe 方法可以被 observer 所訂閱叽讳，訂閱同時會開始觸發(fā)上傳追他，同時返回一個 subscription 對象，該對象有一個 unsubscribe 方法取消訂閱岛蚤，同時終止上傳行為邑狸。

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涤妒，用來設(shè)置上傳過程的監(jiān)聽函數(shù)单雾，有三個屬性 next、error她紫、complete:

var observer = {
  next(res){ // 接收上傳進度信息硅堆，res 參數(shù)是一個帶有 total 字段的 object，包含loaded(已上傳大小贿讹，單位為字節(jié)渐逃。)、total(本次上傳的總量)民褂、percent(當前上傳進度茄菊，范圍：0～100。)三個屬性赊堪，提供上傳進度信息面殖。 },
  error(err){ // 上傳錯誤后觸發(fā)，參數(shù) err 為一個包含 code哭廉、message畜普、isRequestError 三個屬性的 object }, 
  complete(res){ // 接收上傳完成后的后端返回信息，res 參數(shù)為一個 object群叶，默認為hash和key, }
}

七吃挑、上傳DEMO

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

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

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

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

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者