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 相关文章推荐
jquery中的事件处理详细介绍
Jun 24 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
学习vue.js条件渲染
Dec 03 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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抽象类用法实例分析
2015/07/07 PHP
微信支付开发订单查询实例
2016/07/12 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
什么是TCP/IP
2014/07/27 面试题
应届生会计求职信
2013/11/11 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
创业计划书介绍
2019/04/24 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技