Node.js+express+MySQL使用七牛云实现的用户头像修改

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhuming3834/article/details/54728918

更新2017-08-24

更新七牛SDK只最新7.0.5版本。


这篇是接着Node.js+express+MySQL仿美团注册登录绑定第三方登录前后端的实现写的。
在之前的系统上,我们加了一个修改用户头像的功能。

准备工作

1.数据库增加字段
在之前的数据库里面我们需要增加一个用户头像的字段,用于存储用户头像的url地址。

alter table user add head_url text not null;

修改之后的表结构如下:
mysq
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';

这个从这里获取
key1
key2
4.构思前后台逻辑
后台:
h
前台:
q
这只是我本人构思的最简单的,实际项目中会比这个复杂。

代码实现

图片上传接口

新建一个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';

这里的空间名是:
qinu3
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是唯一的。

没有更多推荐了,返回首页