上一篇文章介绍了“如何将图片上传到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要快上好几倍，使用体验还是很不错的，大家可以放心使用。