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技术技巧大全(五)
Jan 22 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
react build 后打包发布总结
Aug 24 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
基于vue实现探探滑动组件功能
May 29 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开发的一些注意点总结
2010/10/12 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
python GUI模拟实现计算器
2020/06/22 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
测量员岗位职责
2015/02/14 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
暂住证明怎么写
2015/06/19 职场文书
中学校园广播稿
2015/08/18 职场文书