更新2017-08-24
更新七牛SDK只最新7.0.5版本。
这篇是接着Node.js+express+MySQL仿美团注册登录绑定第三方登录前后端的实现写的。
在之前的系统上，我们加了一个修改用户头像的功能。
准备工作
1.数据库增加字段
在之前的数据库里面我们需要增加一个用户头像的字段，用于存储用户头像的url地址。
alter table user add head_url text not null;修改之后的表结构如下：
2.增加一个修改数据库的借口
在Node.js+express+MySQL仿美团注册登录绑定第三方登录前后端的实现
提到的usersql.js里面，我们需要增加提行语句：
updateHeadImage: 'UPDATE user SET head_url = ? WHERE username = ? AND password = ? ',用于修改用户头像信息。
3.选择图床
我的图床选择的是七牛的对象存储。
七牛对应的Node.js的SDK文档地址
其实七牛的使用还是很简单的，具体步骤看官方文档就行。
里面的这里：
//需要填写你的 Access Key 和 Secret Key
qiniu.conf.ACCESS_KEY = 'Access_Key';
qiniu.conf.SECRET_KEY = 'Secret_Key';这个从这里获取
4.构思前后台逻辑
后台：
前台：
这只是我本人构思的最简单的，实际项目中会比这个复杂。
代码实现
图片上传接口
新建一个upload.js的js文件，代码如下：
var express = require('express');
var router = express.Router();
var fs = require('fs');
// 引入七牛模块
var qiniu = require("qiniu");
//要上传的空间名
var bucket = 'blog-github-img';
var accessKey = '你的accessKey';
var secretKey = '你的secretKey';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var options = {
scope: bucket,
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken = putPolicy.uploadToken(mac);
var config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z0;
// 图片上传
router.post('/api/upload', function(req, res, next){
// 图片数据流
var imgData = req.body.imgData;
// 构建图片名
var fileName = Date.now() + '.png';
// 构建图片路径
var filePath = './tmp/' + fileName;
//过滤data:URL
var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
var dataBuffer = new Buffer(base64Data, 'base64');
fs.writeFile(filePath, dataBuffer, function(err) {
if(err){
res.end(JSON.stringify({status:'102',msg:'文件写入失败'}));
}else{
var localFile = filePath;
var formUploader = new qiniu.form_up.FormUploader(config);
var putExtra = new qiniu.form_up.PutExtra();
var key = fileName;
// 文件上传
formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr,
respBody, respInfo) {
if (respErr) {
res.end(JSON.stringify({status:'101',msg:'上传失败',error:respErr}));
}
if (respInfo.statusCode == 200) {
var imageSrc = 'http://o9059a64b.bkt.clouddn.com/' + respBody.key;
res.end(JSON.stringify({status:'100',msg:'上传成功',imageUrl:imageSrc}));
} else {
res.end(JSON.stringify({status:'101',msg:'上传失败',error:JSON.stringify(respBody)}));
}
// 上传之后删除本地文件
fs.unlinkSync(filePath);
});
}
});
})
module.exports = router;这里有两点需要注意；
1.要上传的空间名
//要上传的空间名
var bucket = 'blog-github-img';这里的空间名是：
2.图片地址：
图片地址是: 外链默认域名 + 图片名
外链默认域名的获取：看上图。
我的处理方式：
var imageSrc = 'http://o9059a64b.bkt.clouddn.com/' + ret.key;3.上传之后需要删除本地图片文件
4.注意
写到这里，图像上传接口没问题的，但是在上传大图的时候会失败：
request entity too large意思就是请求的body体太大。因为默认的post请求的请求体是2M还是4M来的。这里我们我们上传大图很显然不行。
我发现我使用的express的post请求的body比2M还小。那么怎么修改呢？
在解决问题时先看看stackoverflow上别人怎么解决的。
这里我们需要在app.js里面做如下修改：
app.use(bodyParser.urlencoded({ extended: false, limit: '50mb' }));之前的代码是没有limit: '50mb'的
后台修改头像接口
在users.js文件里面新增一个接口
// 修改用户头像接口
router.all('/user/updateheadimage', function(req, res, next){
if (req.method == "POST") {
var param = req.body;
} else{
var param = req.query || req.params;
}
client.query(User.updateHeadImage,[param.headUrl,param.username,param.password],function (err, results){
if (err){
throw err
res.end(JSON.stringify({status:'101',msg:'修改失败!'}));
}else{
res.end(JSON.stringify({status:'100',msg:'修改成功!',head_url:param.headUrl}));
}
})
});前台的实现
前台的实现大家看我之前的文章HBuilder webApp开发(五)相册-拍照-图片上传
就是把之前没做完的工作现在补完。代码也同步更新到我的github了。
下载地址：请点击我！。
最后
至此图像上传和用户修改头像介绍完了。
这里一直存在一个问题，我们通过用户名和密码来确定用户的，用户名和密码一直才确定是一个用户。
但是在实际的后台系统中都是通过用户ID来查找用户信息的，用户ID是唯一的。