上一篇文章介紹了“如何將圖片上傳到Cloudinary云平臺撞蚕？”
但是由于Cloudinary的服務(wù)器在國外过牙，所以上傳和讀取圖片的速度會很慢，不適合用作生產(chǎn)寇钉，因此有必要再介紹一下國內(nèi)廣受歡迎的“七牛”云平臺谦秧。以及分步驟給大家介紹如何使用七牛撵溃。

如何使用七牛疚鲤？

1缘挑、注冊、登錄（不用細(xì)說）

各位可以使用我的邀請鏈接注冊：https://portal.qiniu.com/signup?code=3l7nsvonfkxn6
拜托９碛啤？髂取蹬挺！

2、添加新的“對象存儲”空間

對象存儲

我們這里添加的對象存儲空間叫做“gougouavatar”

3溯泣、后臺定義signature接口根據(jù)參數(shù)生成key

var qiniu = require('qiniu')
var config=require('../../config/config')
var uuid=require('uuid')

qiniu.conf.ACCESS_KEY = config.qiniu.AK;
qiniu.conf.SECRET_KEY = config.qiniu.SK;
var mac = new qiniu.auth.digest.Mac(config.qiniu.AK, config.qiniu.SK);

//要上傳的空間
var bucket = 'gougouavatar';

//上傳到七牛后保存的文件名
// key = 'my-nodejs-logo.png';

//構(gòu)建上傳策略函數(shù)
function uptoken(bucket, key) {
  var str=bucket+":"+key
  var putPolicy = new qiniu.rs.PutPolicy({scope:bucket+":"+key});
  return putPolicy.uploadToken(mac);
}

function getQiniuToken(key){
    var token=uptoken(bucket,key)
    return token;
}

exports.signature=function* (next) {
  var body=this.request.body
  var cloud=body.cloud
  var key
  var token
  key=uuid.v4()+'.jpeg'
  token=getQiniuToken(key)
  this.body={
    success:true,
    data:{
        token:token,
        key:key
    }
  }
}

其中的ACCESS_KEY和SECRET_KEY兩個參數(shù)來自于“個人中心”的“秘鑰管理”模塊：

秘鑰管理

4垃沦、前端調(diào)用后臺定義的signature接口獲取key

  function _getQiniuToken(){
    var accessToken=this.state.user.accessToken
    var signatureURL=config.api.base+config.api.signature
    return request.post(signatureURL,{
      accessToken:accessToken,
      cloud:"qiniu"
    })
    .catch((err) => {
      console.log(err);
    })
  }

上傳圖片
function _upload(body){
    var that = this
    var xhr = new XMLHttpRequest()

    //七牛地址此處為：http://upload.qiniu.com

    var url = config.qiniu.upload

    xhr.open('POST',url)

    xhr.onload = () => {

      if (xhr.status!==200) {
        AlertIOS.alert('請求失敗2')
        console.log(xhr.responseText)
        return
      }
      if (!xhr.responseText) {
        AlertIOS.alert('請求失敗')
        return
      }
      var response
      try {
        response=JSON.parse(xhr.response)
      }
      catch(e){
        console.log(e)
        console.log('parse fails')
      }

      if(response){
        var user=this.state.user
        user.avatar = response.key  //七牛獲取圖片標(biāo)準(zhǔn)地址

      }

    }
   }
   xhr.send(body)
};


var uri=res.uri  //圖片的本地地址

_getQiniuToken()
.then(function(data){
  if (data && data.success) {
    //從后臺拿到生成好的簽名
    var token=data.data.token
    var key=data.data.key
    var body = new FormData()
    body.append('token', token)
    body.append('resource_type', 'image')
    body.append('key',key)
    body.append('file', {
      type:'image/jpeg',
      uri:uri,
      key:key
    })
    _upload(body)
  }
})

_getQiniuToken()返回一個封裝promise函數(shù)，這個函數(shù)調(diào)用了后臺生成簽名算法的接口靶剑；
這個函數(shù)的回調(diào)里拿到了后臺生成的key和其他參數(shù)池充；
最后調(diào)用_upload方法向七牛的上傳圖片的接口地址：http://upload.qiniu.com，發(fā)送請求收夸，上傳圖片；
最后的響應(yīng)參數(shù)response.key即為圖片上傳成功之后的地址卧惜。
如：deae507d-73fd-4489-9d7f-d5fa275bcbe5.jpeg
想要訪問該圖片，還需拼接上七牛提供的測試域名：

測試域名

總結(jié)

經(jīng)過測試设凹，使用七牛進行上傳的速度確實很快忱详，比國外的cloudinary要快上好幾倍，使用體驗還是很不錯的匈睁，大家可以放心使用。