node+express上傳圖片到七牛
阿新 • • 發佈：2018-12-23
本人微信公眾號： 前端修煉之路，歡迎關注
最近做專案的時候有一個上傳圖片的需求，由於沒有後端的配合，所以決定自己來搭個伺服器，實現上傳圖片功能。以後如果需要修改成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/[email protected]/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頁面即可。
來源：https://segmentfault.com/a/1190000017064729