node+express上传图片到七牛
本人微信公众号：前端修炼之路，欢迎关注
最近做项目的时候有一个上传图片的需求，由于没有后端的配合，所以决定自己来搭个服务器，实现上传图片功能。以后如果需要修改成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页面即可。
来源：https://segmentfault.com/a/1190000017064729
node+express上传图片到七牛的更多相关文章
- axios上传图片(及vue上传图片到七牛)）
浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提 ...
- koa-ueditor上传图片到七牛
问题描述:服务器系统架构采用的是koa(并非koa2),客户端富文本编辑器采用的是百度的ueditor控件.现在需要ueditor支持将图片直接上传到七牛云. 前提:百度的ueditor需要在本地配置 ...
- UEditor上传图片到七牛C#（后端实现）
由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1 免费10G 的容量 ,对个人网站足够用 2 规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七 ...
- 使用微信 SDK 上传图片到七牛
总体思路是:在微信下选好图片后将图片上传到微信服务器,在后端使用微信服务器返回的图片 serverId 加上调用接口的 ApiTicket 通过七牛的 fetch 接口向微信服务器下载多媒体文件的接口 ...
- JAVA简单上传图片至七牛
utils package com.example.demo.utils; import com.alibaba.fastjson.JSONObject; import com.qiniu.commo ...
- node+express上传图片
注意: 别用multer 上传文件了,太坑了,普通文本获取不到,折腾了半天没有解决,最后采用 multiparty 解决了: <!DOCTYPE html><html> < ...
- vue项目中使用element ui上传图片到七牛
1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...
- UEditor上传图片到七牛云储存（java）
我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...
- UEditor上传图片到七牛云储存（c#）
我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...
随机推荐
- ADO.NET:连接数据字符串
ylbtech-ADO.NET:ADO.NET-Oracle|SQLServer|MySql|Access|Excel-dddd ADO.NET:连接数据字符串 1.A,SqlServer返回顶部 1 ...
- 计算机网络自顶向下第三章传输层二TCP
TCP 全双工 A-B,B-A 点对点 一对一的 TCP连接建立过程 客户首先发送一个特殊的TCP报文段,服务器用另一个特殊的TCP报文段来相应,最后,客户再用第三个特殊的报文段作为相应,前两个报文段 ...
- 2016.6.21 eclipse配置server locations时按钮为灰色
我在使用eclipse配置Tomcat服务器的时候发现,默认情况下Tocmat把我们部署的项目放在了workspaces下面,需要手动修改将其放在tomcat的安装路径下的webapp内. 从图中可以 ...
- shell脚本中数组array常用技巧学习实践
shell中数组的下标默认是从0开始的 1.将字符串放在数组中,获取其长度 #!/bin/bashstr="a b --n d"array=($str)length=${#arra ...
- Struts2 convention插件试用+ Spring+Hibernate SSH整合
第一步,引入struts2-convention-plugin-2.2.1.jar 然后,改动配置文件. 我是在struts.properties文件里改动的: struts.objectFactor ...
- blind xxe攻击
最近做啊里的题的时候遇到了 http://hivesec.net/web-security/%E5%85%B3%E4%BA%8Eblind-xxe.html
- 用PHP调用证件识别接口识别本地图片
前置条件 在开始前,请作如下准备:1.学会用PHP输出“Hello World” 2.去聚合数据申请证件识别专用的KEY:https://www.juhe.cn/docs/api/id/153 操作步 ...
- ios控件自定义指引
转载自:http://bbs.9ria.com/thread-256747-1-1.html 一直以来都想写点什么,做点有意义的事,从今天开始我将会把自己在这一年的学习和应用IOS开发中的学习心得和体 ...
- 转jmeter 性能测试 JDBC Request （查询数据库获取数据库数据） 的使用
JDBC Request 这个Sampler可以向数据库发送一个jdbc请求(sql语句),并获取返回的数据库数据进行操作.它经常需要和JDBC Connection Configuration配置原 ...
- An easy to use android color picker library
https://github.com/xdtianyu/ColorPicker