使用layui+express实现用户头像的修改（图片上传模块使用阿里云OSS对象存储）

本文主要讲解如何使用nodejs实现修改用户头像的功能

实现效果如下：

1.点击「修改头像」，从本地选择图片，点击「确认」

2.成功修改头像，并更新页面头像

 

1.参考阿里云官方实例，配置oss存储

Web端上传数据至OSS_对象存储-阿里云帮助中心

2.OSS上传图片并返回图片链接

2.1 引用oss配置文件，并引用multiparty用于解析图片

var fo = require('../module/oss_config')
var multiparty = require('multiparty'); 
var myDate = new Date();

2.2 实现oss上传图片的接口

var f =0;
router.post('/index/upload', function(req, res1, next) {
  console.log("进入")
  f++;
  var id = myDate.getTime()+f //根据时间生成文件名称
  var filename = id.toString()
  var form = new multiparty.Form();
    form.parse(req, function(err, fields, files) {
      fo.fileOperation.putFile(filename,files.file[0].path).then(res=>{
        console.log(res)
        res1.send({//返回图片url
          data:res,
          code:0
        })
      })
    });
});

3.实现头像的修改 接口

//   修改头像
exports.updata_u_url = (req, res, next) => {
    console.log("1", req.body)
    var newurl = req.body.newurl; //新头像的url
    var u_id = req.body.u_id;  //用户id
    sql=  `update userinfo set u_photo_url="${newurl}" WHERE u_id ="${u_id}"`
    db.query(sql, (results, fields) => {
        console.log("123", results, fields);//操作成功回调函数返回的结果
        if(results.affectedRows == 1){
            res.status(200).json({
                code: 200,
                msg: '修改成功',
            })
        }else{
            res.status(200).json({
                code: 300,
                msg: '修改失败',
            })
        }    
    })
}

4.前端代码的实现

4.1 html代码

  <div class="layui-form layui-form-pane layui-tab-item">
             <div class="layui-form-item">
                   <div class="avatar-add">
               <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB（随便上传吧！）</p>
                            
                  <button type="button" class="layui-btn upload-img layui-btn" id="up_photo">
                     <i class="layui-icon">&#xe67c;</i>修改头像
                               </button>
                             <img id="u_photo1" src="/">
                              <span class="loading"></span>
                      </div>
                 </div>
   </div>

4.2js代码

依次调用上传图片的接口和更新头像url的接口，并异步执行 更新当前页面上的url 的代码

      // 更换头像
        layui.use('upload', function () {
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#up_photo' //绑定元素
                , url: '/index/upload' //上传接口
                , accept: 'images'//这里可以设置上传的类型限制
                , auto: true 
                , done: function (res) {
                    console.log(res);
                    if (res.code === 0) {
                        var url = res.data
                        console.log("url", url)
                        $.ajax({   //调用上传图片的接口
                            url: '/user/userset/updata_p_url',
                            type: 'post',
                            data: {
                                u_id: layui.sessionData('userinfo').session.userid,
                                newurl: res.data
                            },// 这次请求要携带的数据

                            success(res) {
                                if (res.code === 200) {
                                    layer.msg("修改成功！")

                                    $.ajax({  //上传成功，调用更新头像的接口
                                        method: 'POST',
                                        url: '/user/userset/updatasession', // 请求的URL地址
                                        data: {
                                            u_id: layui.sessionData('userinfo').session.userid  //根据sessionData 获取当前用户的id
                                        },// 这次请求要携带的数据
                                        dataType: "json",
                                        success: function (res) {
                                            console.log("session", res)
                                            console.log(1)
                                        }
                                    }).then(() => {  //更新成功后 异步执行 更新页面上的头像url 同时更新session中的url
                                        var sessionData = layui.sessionData('userinfo').session
                                        console.log("url", url)
                                        sessionData.u_photo_url = url
                                        layui.sessionData('userinfo', {
                                            key: 'session'
                                            , value: sessionData
                                        });
                                        document.getElementById("u_photo").src = url;
                                        document.getElementById("u_photo1").src = url;

                                        console.log(2)
                                    })
                                }
                                else {
                                    layer.msg("修改失败！")
                                }
                            }
                        })
                    } else {
                        layer.msg("1上传失败！")
                    }
                }
                , error: function () {
                    //请求异常回调
                    layer.msg("上传失败！")
                }
            });
        });