豫ICP备17040950号-2

使用七牛管理图片

文章目录
  1. 1. 功能描述
  2. 2. 原理
  3. 3. 代码
    1. 3.1. html
    2. 3.2. js
    3. 3.3. Node端
  4. 4. 源码
  5. 5. 后记
  6. 6. 书签

功能描述

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

原理

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

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

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

代码

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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

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
$('.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端

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
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
});
}
});
}

源码

https://github.com/voidking/nodeforum/blob/master/views/post/post-add.html
https://github.com/voidking/nodeforum/blob/master/public/js/post/post-add.js
https://github.com/voidking/nodeforum/blob/master/controllers/post.js

后记

上传的交互过程,是前端把图片数据传给Node端,Node端转发图片数据到七牛服务器。七牛服务器返回结果数据给Node端,Node端转发结果数据给前端。

这个过程比较麻烦,更好的做法,是前端能够直接把图片数据传给七牛服务器,七牛服务器返回结果给前端。按照七牛给的文档,是可以实现的,感兴趣的小伙伴请研读七牛的《JavaScript SDK使用指南》。

书签

七牛开发者中心
http://developer.qiniu.com/

JavaScript SDK使用指南
http://developer.qiniu.com/code/v6/sdk/javascript.html

七牛 Node.js SDK
https://www.npmjs.com/package/node-qiniu

File对象上传图片(nodejs版)
http://www.html-js.com/article/NodejsDemoDemo-go

图片上传时input file change事件多次触发解决
http://www.aichengxu.com/view/78921

用js获取上传前图片的宽高
http://bbs.csdn.net/topics/390768571

HTML5 之文件操作(file)
http://blog.csdn.net/oscar999/article/details/37499743

Using files from web applications
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

图片基本处理 (imageView2)
http://developer.qiniu.com/code/v6/api/kodo-api/image/imageview2.html

保存裁剪后的图片的疑问
https://segmentfault.com/q/1010000003892579

base64百度百科

好文推荐:移动端图片格式调研
http://www.cocoachina.com/ios/20151201/14478.html

Plupload
http://www.plupload.com/