本文共 6321 字，大约阅读时间需要 21 分钟。
本人微信公众号： 前端修炼之路，欢迎关注
最近做项目的时候有一个上传图片的需求，由于没有后端的配合，所以决定自己来搭个服务器，实现上传图片功能。以后如果需要修改成java或者php为后端，直接使用即可，而不用等到后端联调的时候再去动手。
这里使用的技术为node.js + qiniu nodeJS SDK+ qiniu JS SDK + express + html5。
首先需要安装node.js，然后新建一个目录在目录下面依次执行下面的命令
cnpm init cnpm install express --savecnpm install qiniu --save
说明：
cnpm替换npm命令，这是因为前者会比后者更快一些。package.json文件，然后在命令行中一路回车就好。--save可以在package.json文件的dependencies属性中，将express和qiniu添加上。这样以后换一个目录，在没有node_modules目录时，直接使用npm install就可以安装了。首先肯定是要注册一个七牛账号的。可以点我的分享链接直接注册：
创建一个七牛存储空间，这里假设空间名字为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这样域名。以后访问文件的时候，就可以通过这个域名来访问的。
在项目目录中创建一个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这个文件中的配置项获取出来。token，所以提供一个借口api/uptoken，向前端返回拼接好的token字符串。在项目目录下创建一个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第二个参数，并添加文件路径前缀，将图片路径区分开。node server.js启动服务，然后访问index.html页面即可。
来源：
转载地址：http://loeel.baihongyu.com/