DoraCMS

您现在的位置是:首页>文档内容页

文档详情

NodeJs利用七牛云存储实现图片上传缩略图生成等操作

doramart 2015-07-31 14:13:20 原创教程234091
七牛云存储是在准备做上传功能的时候接触到的,于是发现很多站点都在用,于是仔细研究了下。优势在于提供10G的免费空间和每月额定的流量,对于小站已经足够免费使用了,于是尝试集成到了cms中,目前感觉还不错。

作为国内比较出色的oss内容存储,七牛有一下几个特点:


pic-safety.png

1、安全性

针对用户上传的数据,至少创建三副本并跨IDC存储到多个数据中心,保证数据的高可用性和可靠性。用户可通过七牛的身份验证机制设置不同的访问权限和访问级别。


2、弹性空间

七牛的存储系统支持弹性扩容,让您无需担心存储空间不足。七牛的存储、加速节点遍布全球,且每个节点都是读/写/同步IO,真正做到数据实时一致,从而保障了读写性能不会随着数据量增长而降低。


3、按需付费

用多少,花多少!传统的存储方式,基本是按峰值预估带宽和空间,但日常用不到那么大的量。使用七牛云存储,可以帮您节省高达70%的存储成本。


4、持续在线

所有的故障(IDC故障、设备故障等)和升级(系统升级、扩容等)透明化,您感觉到的是持续可用的服务。七牛的服务7x24小时在线,避免服务升级或服务器宕机而导致数据不可访问。


在分发加速和数据处理方面也做的不错,提供丰富的api可以实现复杂的需求,目前我就最简单的图片上传说明一下。


主要用到了七牛的JS SDK 和 NodeJs sdk


1、前端引入js文件:

<!--七牛上传-->
<script src="/plugins/qiniu/plupload.full.min.js"></script>
<script src="/plugins/qiniu/qiniu.js"></script>

2、前端表现层:

<div class="col-sm-4 selectHeaderLog" id="upContainer">
       <button class="btn btn-gray" role="button" id="pickfiles">选择图片</button>
       <p>jpg、gif、png格式,尺寸要求:<font color="#c00">100x100/px</font></p>
</div>


3、初始化上传按钮:

//初始化七牛云存储
function initQiniuBtn($scope,containerId,bottonId,callBack){
    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: 'pickfiles',       //上传选择的点选按钮,**必需**
        uptoken_url: '/users/qiniu/upToken',
        //Ajax请求upToken的Url,**强烈建议设置**(服务端提供)
        // uptoken : '<Your upload token>',
        //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
        // unique_names: true,
        // 默认 false,key为文件名。若开启该选项,SDK会为每个文件自动生成key(文件名)
        save_key: true,
        // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`,则开启,SDK在前端将不对key进行任何处理
        domain: 'http://7xkrk4.com1.z0.glb.clouddn.com/',
        //bucket 域名,下载资源时用到,**必需**
        container: 'upContainer',           //上传区域DOM ID,默认是browser_button的父元素,
        max_file_size: '5mb',           //最大文件体积限制
        flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
        max_retries: 3,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        drop_element: 'container',        //拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传
        chunk_size: '4mb',                //分块上传时,每片的体积
        auto_start: true,                 //选择文件后自动上传,若关闭需要自己绑定事件触发上传
        filters: {
            mime_types : [
                {title : "Image files", extensions: "jpg,jpeg,gif,png"}
            ]
        },
        multi_selection : false,
        init: {
            'FilesAdded': function(up, files) {
                plupload.each(files, function(file) {
                    // 文件添加进队列后,处理相关的事情
                });
            },
            'BeforeUpload': function(up, file) {
                // 每个文件上传前,处理相关的事情
            },
            'UploadProgress': function(up, file) {
                // 每个文件上传时,处理相关的事情
            },
            'FileUploaded': function(up, file, info) {
                var domain = up.getOption('domain');
                var res = jQuery.parseJSON(info);

                callBack($scope,domain,res);

            },
            'Error': function(up, err, errTip) {
                //上传出错时,处理相关的事情
            },
            'UploadComplete': function() {
                //队列文件处理完毕后,处理相关的事情
            },
            'Key': function(up, file) {
                // 若想在前端对每个文件的key进行个性化处理,可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效
                var key = "";
                // do something with key here
                return key
            }
        }
    });
// domain 为七牛空间(bucket)对应的域名,选择某个空间后,可通过"空间设置->基本设置->域名设置"查看获取
// uploader 为一个plupload对象,继承了所有plupload的方法,参考http://plupload.com/docs
}



上面是七牛提供的初始化按钮的方式,在七牛文档可以找到,我在这里做了点小改动,传入了callBack 回调函数,通过后面的


initQiniuBtn($scope,'upContainer','pickfiles',afterUpdateLogo);

方式进行调用,这样其它的上传按钮就可以用同一个初始化的方法了,不用重复写。


4、服务端只实现了一个获取 upToken 的方法,服务端需要先安装nodejs sdk

npm install qiniu --save


//七牛获取uptoken
//七牛云存储
var qiniu = require('qiniu');

//七牛key
qiniu.conf.ACCESS_KEY = Settings.QINIUACCESS_KEY;
qiniu.conf.SECRET_KEY = Settings.QINIUSECRET_KEY;

router.get('/qiniu/upToken', function(req, res, next) {

    var myUptoken = new qiniu.rs.PutPolicy(Settings.QINIUCMSBUCKETNAME);
    var token = myUptoken.token();
    moment.locale('en');
    var currentKey = moment(new Date()).format('YYYY-MM-DD--HH-mm-ss');
    res.header("Cache-Control", "max-age=0, private, must-revalidate");
    res.header("Pragma", "no-cache");
    res.header("Expires", 0);
    if (token) {
        res.json({
            uptoken: token,
            sava_key :currentKey
        });
    }

});


我这里返回了两个参数:

uptoken 必须,赋予客户端上传权限

save_key 非必须,定义上传文件名称参数


大功告成

文章评论

取消回复
登录 参与评论

评论列表(