七牛云图片上传及本地预览

发表于 | 分类于

1、七牛云上传图片插件的使用（初级）

1.1 更换头像功能

插件地址：https://developer.qiniu.com/kodo/sdk/1283/javascript
该插件是七牛云官方提供的，基于jQuery编写，所以首先要引入jQuery。以下插件建议在html的body底部引入，确保被率先加载，插件的顺序不能颠倒。

1）在页面中引入jQuery，在html的body底部引入，确保被率先加载
2） 在页面中引入 plupload插件，plupload.full.min.js（产品环境）或引入 plupload.dev.js 和 moxie.js（开发调试）
3） 在页面中引入 qiniu.min.js（生产环境）或 qiniu.js（开发调试），代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--上传区域DOM ID，默认是browser_button的父元素，内层也必须使用id命名，然后传入uploader的对应参数中-->
<div id="container">
    <span id="pickfiles">更换头像</span>
</div>
<!-- 引入文件jQuery库 -->
<script src="../../src/lib/jquery.min.js"></script>
<!-- 引入plupload.full.min.js第三方上传库，七牛SDK是基于这个库封装的 -->
<script type="text/javascript" src="../../src/lib/CKEditor/js/plupload.full.min.js"></script>
<!-- 引入七牛官方SDK，可在七牛开发中中心下载 -->
<script type="text/javascript" src="../../src/lib/qiniu.min.js"></script>

4）配置、初始化 uploader,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
var page = {
    // 获取七牛云Token，变量名uptoken不要修改，上传七牛云要用到的token。
    getConfig: function() {
        var _this = this;
        // 获取七牛云配置的接口（返回uptoken、domain）
        _qiniu.getBucketConfig(function(data) {
            uptoken = data.config.token;
            domain = data.config.bucket_domain;
            // 七牛上传图片配置（options）
            var options = {
                runtimes: 'html5,flash,html4', // 上传模式，依次退化
                browse_button: 'pickfiles', // 上传选择的点选按钮，必需
                uptoken: uptoken, // uptoken是上传凭证，由其他程序生成
                get_new_uptoken: true, // 设置上传文件的时候是否每次都重新获取新的uptoken
                unique_names: true, // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
                domain: domain, // bucket域名，下载资源时用到，必需
                container: 'container', // 上传区域DOM ID，默认是browser_button的父元素
                max_file_size: '100mb', // 最大文件体积限制
                max_retries: 3, // 上传失败最大重试次数
                dragdrop: true, // 开启可拖曳上传
                drop_element: 'container', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
                chunk_size: '4mb', // 分块上传时，每块的体积
                auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
                init: {
                    'FilesAdded': function(up, files) {
                        plupload.each(files, function(file) {
                            // 文件添加进队列后，处理相关的事情
                        });
                    },
                    'BeforeUpload': function(up, file) {
                        // 每个文件上传前，处理相关的事情
                    },
                    'UploadProgress': function(up, file) {
                        // 每个文件上传时，处理相关的事情
                    },
                    'FileUploaded': function(up, file, info) {
                        // 每个文件上传成功后，处理相关的事情
                        // 其中info是文件上传成功后，服务端返回的json，形式如：
                        // {
                        //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                        //    "key": "gogopher.jpg"
                        //  }
                        // 拿到返回图像的url
                        var domain = up.getOption('domain');
                        // var res = parseJSON(info);
                        // var res = JSON.parse(info);
                        var sourceLink = domain + file.target_name; //获取上传成功后的文件的Url
                        // 保存图像的url，之后调用接口替换服务器端的图片地址即可完成头像更换功能
                        _this.change_user_avatar(sourceLink);
                    },
                    '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
                    }
                }
            }
    
            // 创建一个七牛上传图片实例并传入配置信息（此时一切准备就绪，点击相应按钮会弹出文件选择弹窗）
            var uploader = Qiniu.uploader(options);
        }, function(errMsg) {
            _util.errTip(errMsg);
        });
    }
}
$(function(){
    page.getConfig();
})

2、七牛云上传图片插件的使用（中级）

2.1 图片本地预览功能（上传前）

大概的原理如下：

  • 七牛上传图片时，有一个回调函数FilesAdded：function(up, files){}，up指向上传实例，files是上传的文件对象（描述可能不准确，请自行console.log(files/up)到控制台查看）
  • 图片本地预览，就是在图片添加以后，从上传队列中使用getNative()方法读取图片的原始对象fileItem,通过url.createObjectURL(fileItem)方法，合成图片的本地url地址
  • 赋值给img标签的src属性,完成图片的预览功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
// 图片上传前本地预览功能
var page = {
    getConfig3: function() {
        var _this = this;
         // 获取七牛云配置的接口（返回uptoken、domain）
        _qiniu.getBucketConfig(function(data) {
                uptoken = data.config.token;
                domain = data.config.bucket_domain;
                // 图片上传配置
                var option3 = {
                    runtimes: 'html5,flash,html4', // 上传模式，依次退化
                    browse_button: 'certificatePic', // 上传选择的点选按钮，必需
                    uptoken: uptoken, // uptoken是上传凭证，由其他程序生成
                    get_new_uptoken: true, // 设置上传文件的时候是否每次都重新获取新的uptoken
                    unique_names: true, // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
                    domain: domain, // bucket域名，下载资源时用到，必需
                    container: 'certificateContainer', // 上传区域DOM ID，默认是browser_button的父元素
                    max_file_size: '100mb', // 最大文件体积限制
                    max_retries: 5, // 上传失败最大重试次数
                    dragdrop: true, // 开启可拖曳上传
                    drop_element: 'certificateContainer', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
                    chunk_size: '4mb', // 分块上传时，每块的体积
                    auto_start: false, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
                    // 设置一次只能选择一个文件
                    multi_selection: false,
                    init: {
                        'FilesAdded': function(up, files) {
                            // 显示或隐藏添加图片按钮
                            if (up.files.length >= 3) {
                                $('#certificateContainer').hide();
                                // 只保留前三张图片
                                up.files.splice(3, up.files.length - 1);
                            } else {
                                $('#certificateContainer').show();
                            }
    
                            // --------------- 图片本地预览 -----------------
                            for (var i = 0; i < files.length; i++) {
                                var fileItem = files[i].getNative(),
                                    url = window.URL || window.webkitURL || window.mozURL;
                                var src = url.createObjectURL(fileItem);
                                var tmpl = '<li data-url="#url#"><img src="#url#"alt=""><i data-id="' + files[i].id + '" class="iconfont close">&#xe646;</i></li>';
                                $("#imgPreview").append($(tmpl.replace(/#url#/ig, src)));
                            }
                            // 删除预览图
                            $('#imgPreview li .close').click(function() {
                                try {
                                    // 删除上传队列中对应的file
                                    up.splice(files[$(this).attr('data-index')], 1);
                                } catch (error) {
                                    console.log(error);
                                } finally {
                                    // 显示或隐藏添加图片按钮
                                    if (up.files.length >= 3) {
                                        $('#certificateContainer').hide();
                                        // 只保留前三张图片
                                        up.files.splice(3, up.files.length - 1);
                                    } else {
                                        $('#certificateContainer').show();
                                    }
                                    // 删除图片和关闭按钮
                                    $(this).parent().remove();
                                    $(this).remove();
                                    console.log(up);
                                }
                            })
                            console.log(up);
                        },
                        'BeforeUpload': function(up, file) {
                            // 每个文件上传前，处理相关的事情
                        },
                        'UploadProgress': function(up, file) {
                            // 每个文件上传时，处理相关的事情
                        },
                        'FileUploaded': function(up, file, info) {
                            // 每个文件上传成功后，处理相关的事情
                            // 其中info是文件上传成功后，服务端返回的json，形式如：
                            // {
                            //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                            //    "key": "gogopher.jpg"
                            //  }
                            // 拿到返回图像的url
                            // var domain = up.getOption('domain');
                            // 拿到地址
                            // var sourceLink = domain + file.target_name; //获取上传成功后的文件的Url
    
                            // 拼接图片链接地址
                            sourceLink += '|' + file.target_name + ':1';
    
                        },
                        'Error': function(up, err, errTip) {
                            //上传出错时，处理相关的事情
                            console.log(errTip);
                        },
                        'UploadComplete': function(up, files) {
                            // 字符串截取，去掉前面的'|'
                            _this.data.certificate_src = sourceLink.substring(1);
    
                            //提交数据
                            _this.toBeDesigner();
    
                            // 清空上传队列
                            up.files.splice(0, up.files.length);
    
                            // 清空预览图
                            $('#imgPreview').empty();
    
                            // 显示或隐藏添加图片按钮
                            if (up.files.length >= 3) {
                                $('#certificateContainer').hide();
                                // 只保留前三张图片
                                up.files.splice(3, up.files.length - 1);
                            } else {
                                $('#certificateContainer').show();
                            }
                        },
                    }
                };
                //创建七牛上传实例（至此，初始化完毕，每次添加图片即可实现本地预览）
                uploader3 = Qiniu.uploader(option3);
            },
            function(errMsg) {
                _util.errTip(errMsg);
            })
    }
}
$(function(){
    page.getConfig3();
})

注意：
由于配置options时，将auto_start: false设置为了false，所以用户选中了图片后，只是本地预览，不会自动上传到服务器。如果要上传图片，需手动调用start()方法uploader3.start()来触发上传动作。

顺便温馨提示一下：
七牛上传图片，我测试了一下，超过5张后只有前5张能上传成功，具体是为啥我也不知道。

至此，七牛云上传的图片的用法讲解完毕，为啥只有初级和中级？因为我很菜，哈哈哈哈~~时间不早了，晚安，全世界！