node简单实现一个更改头像功能的示例


Posted in Javascript onDecember 29, 2017

前言

一直想写这篇文章,无奈由于要考试的原因,一直在复习,拖延到现在才写?,之前用 node 的 express 框架写了个小项目,里面有个上传图片的功能,这里记录一下如何实现(我使用的是 ejs)?

思路

首先,当用户点击上传头像,更新头像的时候,将头像上传到项目的一个文件夹里面(我是存放在项目的public/images/img里面),并且将图像名重命名(可以以时间戳来命名)。

node简单实现一个更改头像功能的示例

同时图片在项目的路径插入到用户表的当前用户的 userpicturepath 里面

然后更新用户的 session,将图片里面的路径赋值给 session 的里面的picture属性里面

<img> 的 src 获取到当前用户的session里面的 picture 的值,最后动态刷新页面头像就换成了用户上传的头像了

实现效果

node简单实现一个更改头像功能的示例

代码

ejs部分

<img class="nav-user-photo" src="<%= user.picture.replace(/public(\/.*)/, "$1") %>" alt="Photo" style="height: 40px;"/>
<form enctype="multipart/form-data" method="post" name="fileInfo">
  <input type="file" accept="image/png,image/jpg" id="picUpload" name="file">
</form>
<button type="button" class="btn btn-primary" id="modifyPicV">确定</button>

js部分

document.querySelector('#modifyPicV').addEventListener('click', function () {
  let formData = new FormData();
  formData.append("file",$("input[name='file']")[0].files[0]);//把文件对象插到formData对象上
  console.log(formData.get('file'));
  $.ajax({
    url:'/modifyPic',
    type:'post',
    data: formData,
    processData: false, // 不处理数据
    contentType: false,  // 不设置内容类型
    success:function () {
      alert('success');
      location.reload();
    },
  })
});

路由部分,使用formidable,这是一个Node.js模块,用于解析表单数据,尤其是文件上传

let express = require('express');
let router = express.Router();
let fs = require('fs');
let {User} = require('../data/db');
let formidable = require('formidable');
let cacheFolder = 'public/images/';//放置路径
router.post('/modifyPic', function (req, res, next) {
  let userDirPath = cacheFolder + "Img";
  if (!fs.existsSync(userDirPath)) {
    fs.mkdirSync(userDirPath);//创建目录
  }
  let form = new formidable.IncomingForm(); //创建上传表单
  form.encoding = 'utf-8'; //设置编码
  form.uploadDir = userDirPath; //设置上传目录
  form.keepExtensions = true; //保留后缀
  form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
  form.type = true;
  form.parse(req, function (err, fields, files) {
    if (err) {
      return res.json(err);
    }
    let extName = ''; //后缀名
    switch (files.file.type) {
      case 'image/pjpeg':
        extName = 'jpg';
        break;
      case 'image/jpeg':
        extName = 'jpg';
        break;
      case 'image/png':
        extName = 'png';
        break;
      case 'image/x-png':
        extName = 'png';
        break;
    }
    if (extName.length === 0) {
      return res.json({
        msg: '只支持png和jpg格式图片'
      });
    } else {
      let avatarName = '/' + Date.now() + '.' + extName;
      let newPath = form.uploadDir + avatarName;
      fs.renameSync(files.file.path, newPath); //重命名
      console.log(newPath)
      //更新表
      User.update({
        picture: newPath
      }, {
        where: {
          username: req.session.user.username
        }
      }).then(function (data) {
        if (data[0] !== undefined) {
          User.findAll({
            where: {
              username: req.session.user.username
            }
          }).then(function (data) {
            if (data[0] !== undefined) {
              req.session.user.picture = data[0].dataValues.picture;
              res.send(true);
            } else {
              res.send(false);
            }
          })
        }
      }).catch(function (err) {
        console.log(err);
      });
    }
  });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
JavaScript 中使用 Generator的方法
Dec 29 #Javascript
js中url对象化管理分析
Dec 29 #Javascript
JS计算距当前时间的时间差实例
Dec 29 #Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 #Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 #Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 #Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 #Javascript
You might like
用PHP生成静态HTML速度快类库
2007/03/18 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
thinkPHP查询方式小结
2016/01/09 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
28个JS验证函数收集
2010/03/02 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
python 字典访问的三种方法小结
2019/12/05 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
总经理职责范文
2013/11/08 职场文书
学院书画协会部门岗位职责
2013/12/01 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
党员公开承诺事项
2014/03/25 职场文书
班级学习计划书
2014/04/27 职场文书
贷款承诺书
2015/01/20 职场文书
看上去很美观后感
2015/06/10 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL