本人微信民众号：
前端修炼之路，迎接关注
近来做项目的时刻有一个上传图片的需求，由于没有后端的合营，所以决议本身来搭个效劳器，完成上传图片功用。今后假如需要修正成java或许php为后端，直接运用即可，而不必比及后端联调的时刻再去着手。
这里运用的手艺为node.js + qiniu nodeJS SDK+ qiniu JS SDK + express + html5。
1. 装置express 和 qiniu
起首需要装置node.js，然后新建一个目次在目次下面顺次实行下面的敕令
cnpm init
cnpm install express --save
cnpm install qiniu --save申明：
- 运用了
cnpm替代npm敕令，这是由于前者会比后者更快一些。 - 第一条敕令会在目次下建立一个
package.json文件，然后在敕令行中一路回车就好。 - 在敕令背面增加
--save能够在package.json文件的dependencies属性中，将express和qiniu增加上。如许今后换一个目次，在没有node_modules目次时，直接运用npm install就能够装置了。
2.设置七牛 AccessKey/SecretKey
起首肯定是要注册一个七牛账号的。能够点我的分享链接直接注册：https://portal.qiniu.com/sign…
建立一个七牛存储空间，这里假定空间名字为qiniu_test。
在个人中心中，找到密钥治理，建立一个密钥。以后就会天生一个accessKey和secretKey。
回到项目目次下，建立一个config.json，将下面的内容粘贴进去
{
"AccessKey": "<Your Access Key>", // https://portal.qiniu.com/user/key
"SecretKey": "<Your Secret Key>",
"Bucket": "<Your Bucket Name>",
"Port": 9000,
"UptokenUrl": "uptoken",
"Domain": "<Your Bucket Domain>" // bucket domain eg:http://qiniu-plupload.qiniudn.com/
}需要替代个中的AccessKey和SecretKey。然后修正Bucket值为适才建立的qiniu_test。个中的Domain，能够在空间概述中找到一个相似http://qiniu-plupload.qiniudn.com如许域名。今后接见文件的时刻，就能够经由过程这个域名来接见的。
3.设置效劳
在项目目次中建立一个server.js，将下面的内容拷贝个中。然后我一一诠释下。
var express = require('express');
var fs = require('fs');
var path = require('path');
var qiniu = require('qiniu');
var app = express();
var config = JSON.parse(fs.readFileSync(path.resolve(__dirname, "config.json")));
var mac = new qiniu.auth.digest.Mac(config.AccessKey, config.SecretKey);
var putExtra = new qiniu.form_up.PutExtra();
var options = {
scope: config.Bucket,
deleteAfterDays: 1,
returnBody: '{"key":"$(key)","hash":"$(etag)","fsize":$(fsize),"bucket":"$(bucket)","name":"$(x:name)"}'
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var bucketManager = new qiniu.rs.BucketManager(mac, config);
app.get('/index.html', function(req, res) {
res.sendFile(__dirname + "/" + "index.html");
});
app.get('/api/getImg', function(req, res) {
var options = {
limit: 5,
prefix: 'image/test/',
marker: req.query.marker
};
bucketManager.listPrefix(config.Bucket, options, function(err, respBody, respInfo) {
if(err) {
console.log(err);
throw err;
}
if(respInfo.statusCode == 200) {
var nextMarker = respBody.marker || '';
var items = respBody.items;
res.json({
items: items,
marker: nextMarker
});
} else {
console.log(respInfo.statusCode);
console.log(respBody);
}
});
});
app.get('/api/uptoken', function(req, res) {
// res.send('Hello World!');
var token = putPolicy.uploadToken(mac);
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,
domain: config.Domain
});
}
});
var server = app.listen(3000, function() {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});- 要想往七牛云空间上传图片，一定要用到
token这个参数。这个token是经由过程后端效劳器猎取出来的，由于我用的是node.js所以用qiniu的nodeJS SDK，假如是其他后端言语，就能够挑选别的SDK。 - 猎取这个
token需要依据之前设置好的AccessKey和SecretKey。所以经由过程fs.readFileSync把config.json这个文件中的设置项猎取出来。 - express 就能够接收前端的要求。由于上传之前必需要
token，所以供应一个托言api/uptoken，向前端返回拼接好的token字符串。
4.增加测试页面
在项目目次下建立一个index.html，将以下内容拷贝个中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://unpkg.com/qiniu-js@2.5.1/dist/qiniu.min.js"></script>
</head>
<body>
<h1>测试七牛云上传图片</h1>
<form action="upload" method="post" enctype="multipart/form-data">
<input class="file-input" type="file" id="select" />
</form>
<div id="result">
</div>
<button onclick="clickButton()">要求图片</button>
<div id="pics"></div>
<script type="text/javascript">
var result;
var fileName;
var domain = 'http://siberiawolf.qiniudn.com/';
var complete = function(res){
$('#result').html('<img src='+result.domain+'/'+fileName+' />');
}
var subObject = {
// next: next,
// error: error,
complete: complete
};
$.ajax({
type: "get",
url: "/api/uptoken",
async: true,
success: function(res) {
result = res;
}
});
$('#select').on('change', function() {
var file = this.files[0];
fileName = 'image/test/'+file.name;
var token = result.uptoken;
var domain = result.domain;
var config = {
useCdnDomain: true,
disableStatisticsReport: false,
retryCount: 6,
region: qiniu.region.z0
};
var putExtra = {
fname: "",
params: {},
mimeType: null
};
var observable = qiniu.upload(file, fileName, token, putExtra, config);
var subscription = observable.subscribe(subObject);
});
var marker = '';
function clickButton(){
$.ajax({
type: "get",
url: "/api/getImg",
async: true,
data:{
marker: marker
},
success: function(res) {
var items = res.items;
marker = res.marker;
var html = '';
items.forEach(function(val, index){
html += '<img src='+domain+val.key+' />'
});
$('#pics').html(html);
}
});
}
</script>
</body>
</html>- 上传之前必需要猎取到
token，所以先要求了一下接口。 - 经由过程指定
qiniu.upload第二个参数，并增加文件途径前缀，将图片途径区离开。 - 猎取图片列表，用的是qiniu供应的api。
5.启动效劳
node server.js启动效劳，然后接见index.html页面即可。
