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 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
js实现京东秒杀倒计时功能
Jan 21 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中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP分页类集锦
2014/11/18 PHP
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
vue实现分页组件
2020/06/16 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
超市重阳节活动方案
2014/02/10 职场文书
小学生读书活动总结
2014/06/30 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
MySql分区类型及创建分区的方法
2022/04/13 MySQL
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL