夜火博客

跟夜火学CodeIgniter - 集成七牛云存储

2014-12-23
教程与电子书
CodeIgniter
PHP
9分钟
1710字

最近有一个项目需要集成七牛云存储的图片存储和调用功能,程序是基于CodeIgniter 2.1.3的PHP框架。刚拿到手完全无从下手的感觉,因为像框架这种东西,想从官方的PHPSDK集成进去,需要改动很多地方。还好,有前辈蹚水,我等后辈直接参考或者说是拿来用了。上传插件采用的是plupload。

plupload:www.plupload.com/

多附件上传控件plupload的使用心得:www.cnblogs.com/luckybird/archive/2013/01/15/2861072.html

七牛云存储:qiniu.com

为做备份之用,还是整篇拉过来一份吧:

最近想做个相册系统,平时都是使用ThinkPHP来开发的,但是这次想换一个PHP框架试试,于是选择了CodeIgniter框架,因为熟悉了TP框架,所以CodeIgniter学起来也相对容易点. 网上搜了一下,几乎没有CodeIgniter结合七牛的案例,加上自己也是初次使用CodeIgniter和七牛,所以花了一整天的时间在研究这个,用到的上传插件是Plupload,在这里分享给大家,希望对大家有帮助。 修改七牛php-sdk 首先下载七牛的php-sdk,将压缩包内的qiniu文件夹放置到CodeIgniter框架applicationlibraries文件夹下.因为CodeIgniter的类库对命名有要求,而七牛sdk的类库文件名和类名不一致,所以需要稍微修改下sdk里面的文件名.

将io.php修改为Qiniu_PutExtra.php 将rs.php修改为Qiniu_RS_GetPolicy.php 将fop.php修改为Qiniu_ImageView.php

引入Plupload并初始化

1
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery-1.11.1.min.js" ></script>
2
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/plupload/plupload.full.min.js" ></script>
3
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js" ></script>
4
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/plupload/i18n/zh_CN.js" ></script>
5
<link rel="stylesheet" href="<?php echo base_url(); ?>public/js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css" />

在模板中添加标签,用于显示上传区域

1
<div id="muilti_uploader">
2
    <p>你的浏览器没有安装Flash插件,或不支持HTML5</p>
3
</div>

设置参数,初始化Plupload(下面有个eval的地方需要手动去掉中间的空格)

1
<script type="text/javascript">
2
$(function() {
3
    var photos = Array(); // 用于存放照片信息
4
    // 设置参数,初始化Plupload
5
6
    $("#muilti_uploader").pluploadQueue({
7
8
        runtimes : 'html5,flash,silverlight,html4',
9
10
        url : "http://up.qiniu.com/",
11
12
        chunk_size : '512kb',
13
14
        rename : true,
15
93 collapsed lines
16
        dragdrop: true,
17
18
        filters : {
19
20
            max_file_size : '10mb',
21
22
            mime_types: [
23
24
                {title : "Image files", extensions : "jpg,jpeg,gif,png"},
25
26
                {title : "Zip files", extensions : "zip"}
27
28
            ]
29
30
        },
31
32
        multipart: true,
33
34
        multipart_params: {
35
36
            'token': '<?php echo $upToken;?>', //token,需要从服务器获取
37
38
        },
39
40
        flash_swf_url : '<?php echo base_url(); ?>public/js/plupload/Moxie.swf'
41
42
    });
43
44
    var uploader = $('#muilti_uploader').pluploadQueue();
45
46
    //上传文件之前触发
47
48
    uploader.bind('BeforeUpload', function(uploader, file){
49
50
        var file_ext = file.name.substr(file.name.lastIndexOf(".")); // 图片后缀
51
52
        //指定文件的名称,如果不设置,七牛会默认将文件的hash值作为文件的名字
53
54
        uploader.settings.multipart_params.key = parseInt(new Date().valueOf()/1000) + '-' + parseInt(Math.random()*8999 + 1000) + file_ext;
55
56
    });
57
58
    //成功上传一个文件后触发
59
60
    uploader.bind('FileUploaded', function(uploader, file, responseObject) {
61
62
        //将七牛返回的json数据转换成对象
63
64
        var res = ev al('('+responseObject.response+')');
65
66
        //组合文件信息
67
68
        var photo = new Object();
69
70
        //因为在数据库中,我用字段名name来存储文件名,用path来存储七牛上的文件名
71
72
        //所以这里的photo对象属性为name和path,如果你用的字段名和我的不一样,请自行修改
73
74
        photo.name = file.name; // 上传之前的图片名称
75
76
        photo.path = res.key; // 保存后的图片名称(含前缀)
77
78
        photos.push(photo); //将对象压入到photos数组
79
80
    });
81
82
    //全部文件上传完成后触发
83
84
    uploader.bind('UploadComplete', function(uploader, file){
85
86
        //文件全部成功上传后,将数据传递给CI框架进行处理
87
88
        $.ajax({
89
90
            url: "<?php echo site_url('photo/save'); ?>", //ci框架处理地址
91
92
            type: "POST",
93
94
            data: {files:JSON.stringify(photos)},
95
96
            success: function(msg){
97
98
                ale rt(msg);
99
100
            }
101
102
        });
103
104
    });
105
106
});
107
108
</script>

CodeIgniter代码部分

在控制器中编写一个方法,用来显示刚才的视图页面.

1
/**
2
3
 * 上传照片页面
4
5
 * @return void
6
7
 */
8
9
public function upload()
10
11
{
12
13
    //载入七牛sdk类库
14
15
    $this->load->library('qiniu/Qiniu_PutExtra');
116 collapsed lines
16
17
    $this->load->library('qiniu/Qiniu_RS_GetPolicy');
18
19
    //配置七牛云存储,请查看自己的七牛账号
20
21
    $bucket = ""; //你的七牛云存储的空间名称
22
23
    $accessKey = ''; //公钥
24
25
    $secretKey = ''; //密钥
26
27
    Qiniu_SetKeys($accessKey, $secretKey);
28
29
    $putPolicy = new Qiniu_RS_PutPolicy($bucket);
30
31
    //生成token
32
33
    $data['upToken'] = $putPolicy->Token(null);
34
35
    //载入视图
36
37
    $this->load->view('photo_upload', $data);
38
39
}
40
41
编写一个方法,用来存储文件信息到自己的数据库.
42
43
/**
44
45
 * 保存照片
46
47
 * @return string
48
49
 */
50
51
public function save()
52
53
{
54
55
    //载入七牛SDK类库
56
57
    $this->load->library('qiniu/Qiniu_RS_GetPolicy');
58
59
    $this->load->library('qiniu/Qiniu_ImageView');
60
61
    $bucket = ""; //你的七牛云存储的空间名称
62
63
    $domain = ''; //你的七牛云存储空间的地址
64
65
    $accessKey = ''; //公钥
66
67
    $secretKey = ''; //密钥
68
69
    Qiniu_SetKeys($accessKey, $secretKey);
70
71
    $imgInfo = new Qiniu_ImageInfo;
72
73
    // 组合数据
74
75
    if (isset($_POST['files']) && !empty($_POST['files'])) {
76
77
        $files = json_decode($_POST['files'], true);
78
79
        foreach ($files as $key => $value) {
80
81
            //生成baseUrl
82
83
            $baseUrl = Qiniu_RS_MakeBaseUrl($domain, $value['path']);
84
85
            //生成fopUrl
86
87
            $imgInfoUrl = $imgInfo->MakeRequest($baseUrl);
88
89
            //获取七牛上的图片属性
90
91
            // format       图片类型,如png、jpeg、gif、bmp等。
92
93
            // width        图片宽度,单位:像素(px)。
94
95
            // height       图片高度,单位:像素(px)。
96
97
            // colorModel   彩色空间,如palette16、ycbcr等。
98
99
            // frameNumber  帧数,gif 图片会返回此项。
100
101
            $arr = json_decode(file_get_contents($imgInfoUrl), true);
102
103
            $files[$key]['name'] = substr($value['name'], 0, strrpos($value['name'], '.')); //只保留文件名部分,去除文件名后缀
104
105
            $files[$key]['width'] = $arr['width']; //图片宽度
106
107
            $files[$key]['height'] = $arr['height']; //图片高度
108
109
            $files[$key]['create_time'] = time();//创建时间
110
111
        }
112
113
    }
114
115
    // 插入数据库
116
117
    if ($this->db->insert_batch('photos', $files)) {
118
119
        echo '上传成功';
120
121
        die;
122
123
    } else {
124
125
        echo '上传失败';
126
127
        die;
128
129
    }
130
131
}

代码中注释写的很全,应该没有需要补充的地方了,代码拿来直接可用,非常省心

参考文章:codeigniter.org.cn/forums/thread-19738-1-1.html

进阶:plupload如何限制上传文件数量,限制只能上传单个文件

本文标题:跟夜火学CodeIgniter - 集成七牛云存储
文章作者:夜火
发布时间:2014-12-23