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与asp.net(c#)互相调用方法
Dec 13 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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/13 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
php和nginx交互实例讲解
2019/09/24 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
Python urlopen 使用小示例
2008/09/06 Python
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
大课间活动制度
2014/01/18 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
北京故宫导游词
2015/01/31 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
新郎接新娘保证书
2015/05/08 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python