如何将图片上传到七牛云平台？

上一篇文章介绍了“如何将图片上传到Cloudinary云平台？”
但是由于Cloudinary的服务器在国外，所以上传和读取图片的速度会很慢，不适合用作生产，因此有必要再介绍一下国内广受欢迎的“七牛”云平台。以及分步骤给大家介绍如何使用七牛。

如何使用七牛？

1、注册、登录（不用细说）

各位可以使用我的邀请链接注册：https://portal.qiniu.com/signup?code=3l7nsvonfkxn6
拜托！！！

2、添加新的“对象存储”空间

对象存储

我们这里添加的对象存储空间叫做“gougouavatar”

3、后台定义signature接口根据参数生成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';

//构建上传策略函数
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两个参数来自于“个人中心”的“秘钥管理”模块：

秘钥管理

“qiniu”和"uuid"模块需要使用npm install qiniu uuid --save提前进行安装;
bucket为在步骤二中给对象存储空间起的名字“ gougouavatar”

4、前端调用后台定义的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  //七牛获取图片标准地址

      }

    }
   }
   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函数，这个函数调用了后台生成签名算法的接口；
这个函数的回调里拿到了后台生成的key和其他参数；
最后调用_upload方法向七牛的上传图片的接口地址：http://upload.qiniu.com，发送请求，上传图片；
最后的响应参数response.key即为图片上传成功之后的地址。
如：deae507d-73fd-4489-9d7f-d5fa275bcbe5.jpeg
想要访问该图片，还需拼接上七牛提供的测试域名：

测试域名

我们这里的测试域名是：p2znp5dtk.bkt.clouddn.com
拼在一起我们就可以得到图片的实际地址：http://p2znp5dtk.bkt.clouddn.com/deae507d-73fd-4489-9d7f-d5fa275bcbe5.jpeg

总结

经过测试，使用七牛进行上传的速度确实很快，比国外的cloudinary要快上好几倍，使用体验还是很不错的，大家可以放心使用。