干货~在项目中使用七牛云作图床

博主最近在开发自己的个人博客，因为之前使用wordpress享受过七牛云飞快的图片加载速度，还是很想回归七牛的拥抱滴。下面介绍下如果通过七牛云的sdk上传你的图片至对象存贮空间

博主使用的是react开发，配合express作为后台，mongodb作为数据库

1、获取一些必要的条件

前端发送数据时需要的token需要从后端取得，首先安装七牛云后端插件

npm install qiniu

获取上传凭证token前，先定义好鉴权对象mac

var accessKey = 'your access key'; 
var secretKey = 'your secret key';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

AK以及SK的秘钥在此处获取

TIM图片20190108153449.png

TIM截图20190108153510.png

这个时候就可以创建最简单的获取token的实例了，完整代码如下：

const qiniu = require('qiniu')
Router.get('/getToken',function(req,res){
    var accessKey = 'your access key'; 
    var secretKey = 'your secret key';
    var mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
    var options = {
        scope: 'blog', //就是你的对象存储空间名
      };
    var putPolicy = new qiniu.rs.PutPolicy(options);
    var uploadToken=putPolicy.uploadToken(mac); //需要的token
    if(uploadToken){
        return res.json({code:0,msg:'获取token成功',token:uploadToken})
    }else{
        return res.json({code:1,msg:'获取token失败'})
    }
})

2、开始从前端上传图片

博主使用的是antd的upload插件，小伙伴们也可以使用其他方式，首先安装七牛云javascriptSDK插件

npm install qiniu-js

        let config = {
            useCdnDomain: true, //是否使用cdn加速域名
            region: qiniu.region.z0 //上传区域
        }
        let putExtra = {
            fname: "", //原文件名
            params: {}, //自定义变量
            mimeType: null //用来限制上传类型,null时不限制，可以设置为["image/png","image/jpeg"]
        };
        let observer = {
            complete(res){
                alert('上传成功');
            }
        }
        var observable = qiniu.upload(file, name,token, putExtra, config)  //file上传的文件，name设置的文件名，token从后台获取
        var subscription = observable.subscribe(observer)  //开始上传

需要注意的是上传的文件类型是一个Blob对象。区域一定要设置正确

qiniu.region.z0: 代表华东区域
qiniu.region.z1: 代表华北区域
qiniu.region.z2: 代表华南区域
qiniu.region.na0: 代表北美区域
qiniu.region.as0: 代表东南亚区域

注意，文件类型是一个二进制文件

上传成功

如果使用自己的图片，用七牛云自己的融合 CDN 测试域名加上图片名字即可

TIM截图20190108160516.png

至此，一个简易的上传实例搭建完成。