云平台背景
在数据大爆炸的时代，企业内部业务数据激增，文本、图片、各类报表、音视频等非结构化数据更是显著增长。据 Gartner 预计，全球信息量每年的最低增长率为 59%，其中有 15% 是结构化数据，其余的 85% 则由各种非结构化数据组成。如何做好海量非结构化数据存储成为众多企业 IT 战略是否成功的关键。
实现可扩展、简单、高效且低成本海量数据存储，对存储架构有更多的掌控性，保证敏感核心数据的私密性，成为诸多企业存储基础设施建设的诉求。针对以上诉求，市面上出现大量可定制化的存储和计算解决方案，如“cloudinary、aws、七牛、upyun”等。
Cloudinary
背景介绍完毕，再来了解下本篇文章的主角：Cloudinary
https://cloudinary.com/
首先附上Cloudinary的官网：https://cloudinary.com/
Cloudinary是“一个为web和移动开发者提供的媒体管理平台，一个解决你图片和视频需求的端到端解决方案”，说白了，就是一个可以帮你存储和管理图片、视频等媒体资源的云平台，你可以把需要上传的“图片、视频”等资源传到Cloudinary进行管理。这样可以减少你公司主服务器的存储压力和带宽压力，也有助于提升数据的安全性和可维护性。
如何使用？
这是本文的重点！！！
接下来就分步骤给大家介绍一下如何将本地的图片传到Cloudinary
1、注册、登录；进入后台：https://cloudinary.com/console。
这个不用细讲；
后台
2、获取Cloudinary配置参数：
var CLOUDINARY = {
cloud_name: 'xiaoke',
api_key: '257192715654639',
api_secret: '***********************',
base:'http://res.cloudinary.com/xiaoke',
image:'https://api.cloudinary.com/v1_1/xiaoke/image/upload',
video:'https://api.cloudinary.com/v1_1/xiaoke/video/upload',
audio:'https://api.cloudinary.com/v1_1/xiaoke/raw/upload'
}
这个配置文件前四个参数来自于后台
后三个参数来自于帮助文档：
https://cloudinary.com/documentation/upload_images#uploading_with_a_direct_call_to_the_api
帮助文档
3、前端调用后台生成签名的接口
var timestamp=Date.now();//时间戳
var signatureURL=config.api.base+config.api.signature
request.post(signatureURL,{
timestamp:timestamp,
type:'avatar'
})
这个接口需要两个参数：
timestamp:时间戳
type:数据类型（后台需根据此判断到底是怎么生成签名）
4、编写后台生成签名的接口(nodejs)
exports.signature=function* (next) {
var body=this.request.body
var type=body.type
var timestamp=body.timestamp
var folder
var tags
if (type==='avatar') {
folder='avatar'
tags='app,avatar'
} else if (type==='video'){
folder='video'
tags='app,video'
} else if (type==='audio'){
folder='audio'
tags='app,audio'
}
var signature = 'folder=' + folder + '&tags=' + tags + '×tamp=' + timestamp + config.cloudinary.api_secret
signature = sha1(signature)
this.body={
success:true,
data:signature
}
}
我们拿到前端传进来的时间戳timestamp和类型type，
先根据类型获得“folder、tags”两个参数，
然后将“ folder、tags、timestamp、api_secret”等参数以键值对的形式拼成一个字符串，
将拼好的字符串通过sha1加密后返回给前端用
5、前端拿到签名后，调用CLOUDINARY的接口上传图片
//接步骤3
.then((data)=>{
if (data && data.success) {
//从后台拿到生成好的签名
var signature=data.data
var body = new FormData()
body.append('signature', signature)
body.append('folder', folder)
body.append('tags', tags)
body.append('timestamp', timestamp)
body.append('api_key', CLOUDINARY.api_key)
body.append('resource_type', 'image')
body.append('file', avatarData)
that._upload(body)
}
})
其中avatarData为base64格式的图片数据，
that._upload(body)为向Cloudinary传图片的方法
6、向Cloudinary上传图片
//把图片上传到图床
_upload(body){
var that = this
var xhr = new XMLHttpRequest()
var url = CLOUDINARY.image
xhr.open('POST',url)
xhr.onload = () => {
if (xhr.status!==200) {
console.log(xhr.responseText)
return
}
if (!xhr.responseText) {
return
}
var response
try {
response=JSON.parse(xhr.response)
}
catch(e){
console.log(e)
console.log('parse fails')
}
//如果返回public_id则表示上传成功
if (response&&response.public_id) {
user.avatar = response.public_id //获取图片标准地址
}
}
//获取上传进度
if(xhr.upload){
xhr.upload.onprogress=(event) =>{
if(event.lengthComputable){
var percent=Number((event.loaded/event.total).toFixed(2))
}
}
}
xhr.send(body)
},
经过以上操作，我们就可以将图片上传到Cloudinary。
在回调里头，如果我们可以拿到response.public_id，则证明上传成功。
我们还可以实时拿到上传的进度，这样可以在前端层面做一些返显操作来减少用户等待时的焦虑：
示例
总结：
经过了以上学习，我们掌握了如何将图片上传到Cloudinary，至于删除、更新等其他操作，也可以用类似的方法实现。
Cloudinary刚注册的时候会有一些免费的空间和带宽供我们测试和学习。
但是由于Cloudinary的服务器部署在国外，因此，在国内使用的话，速度和体验都不是很好，如果是生产环境的项目的话，不建议使用Cloudinary，毕竟传输速度可能会是个很大的问题。不过用来学习和做一些demo自己玩的话，还是可以的。
于此同时国内的其他云平台提供了也很不错的云存储服务，部署在国内的服务器，因此速度会很不错。如果是生产级别的应用的话建议使用国内平台。
有时间会再出一篇关于“七牛云”的文件上传的文章，敬请期待。
最后附上我的Cloudinary邀请码：https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/tskmpxub94ttdg8u1vyp
大家在注册Cloudinary的时候可以用我的邀请码，这样可以帮我增加空间，方便我继续学习和推出更多的教学文章。拜托大家！！！
网友评论