2016-06-20

使用七牛管理图片

文章目录

1. 功能描述
2. 原理
3. 代码
4. 源码
5. 后记
6. 书签

功能描述

在发布帖子界面，用户可以选择图片上传，图片上传成功后显示在发布帖子界面上，上传失败则提示“上传失败”。

原理

七牛是一个优秀的云存储平台，提供图片相关的缩略、剪裁、添加水印等功能。本系统的重心在于社区论坛，所以处理图片的工作就交给七牛了，避免重复造轮子。

在发布帖子页面，用户选择图片后，浏览器获取到图片数据imageData，发送给我的服务器，我的服务器转发图片数据给七牛服务器。上传成功后，七牛服务器返回数据给我的服务器，我的服务器返回数据给浏览器。

浏览器获得返回数据，如果获取到服务器返回的状态true和图片url，则把图片显示在页面上。否则，就把告知用户“上传失败”。

代码

html

<div class="form-group">
    <label for="picture" class="col-sm-2 control-label">图片</label>
    <div class="col-sm-9">
        <!--<input id="image"  type="file" multiple>-->
        <input type="file" id="picture" style="display: none;" />
        <span class="icon-picture"></span>
        <span class="icon-loading"></span>
        <span class="addimage">添加图片</span>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-9">
        <div class="pictures">
            <!--动态插入图片-->
        </div>
    </div>
</div>

js

$('.icon-picture').click(function(){
    $('#picture').click();
    $('#picture').unbind().on('change',function(){
        var fileNumber = $('#picture').get(0).files.length;
        if(fileNumber==0){
            return;
        }
        var file = $('#picture').get(0).files[0];
        console.log(file);
        var fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = function(e) {
//            var fileType = file.name.substring(file.name.lastIndexOf('.'), file.name.length);
//            var now = new Date();
//            var fileName = now.getTime() + 'langting' + parseInt(Math.random() * 20) + fileType;
            $(".addimage").text("上传中...");
            $('.icon-picture').hide();
            $('.icon-loading').css({
                'display': 'inline-block'
            });
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/qn-upload',
                data: {
                    imageData: e.target.result
                },
                success: function(data) {
                    if (data.state == true) {
                        setTimeout(function() {
                            $(".addimage").text("添加图片");
                            $('.icon-loading').hide();
                            $('.icon-picture').show();
                            var html = template('pic_template',data);
                            $('.pictures').append(html);
                        }, 1500);
                    } else {
                        alert("上传失败");
                    }
                },
                error: function(){

                }
            });
        }
    });
});

// 删除图片
$('.pictures').on('click','.icon-delete',function(){
    $(this).parents('.pic').remove();
});

Node端

exports.qn_upload = function(req,res){
    var qn = require('qn');
    var client = qn.create({
        accessKey: 'JEBuh6qG9FPI6atoycgdoypwOZJWuzYk1YXnC-6c',
        secretKey: 'IBAa_7Mkj2_ROefIRcwVjcVEK9PVFDvzrtPiL9nO',
        bucket: 'forum',
        domain: 'http://7xstti.com2.z0.glb.clouddn.com'
    });

    var imageData = req.body.imageData;
    var key = uuid.v1();
    imageData = imageData.replace(/^data:image\/\w+;base64,/, "");
    var dataBuffer = new Buffer(imageData, 'base64');
    client.upload(dataBuffer, {
        key: key
    }, function(err, result) {
        if (err) {
            res.json({
                state: false,
                imgname: imageName,
                imgurl: "",
                imghash: ""
            });
        } else {
            res.json({
                state: true,
                imgname: result.key,
                imgurl: result.url,
                imghash: result.hash
            });
        }
    });
}