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

云平台背景

在数据大爆炸的时代，企业内部业务数据激增，文本、图片、各类报表、音视频等非结构化数据更是显著增长。据 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 + '&timestamp=' + 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的时候可以用我的邀请码，这样可以帮我增加空间，方便我继续学习和推出更多的教学文章。拜托大家！！！