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 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
YUI模块开发原理详解
Nov 18 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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基于DOM创建xml文档的方法示例
2017/02/08 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
Dom操作之兼容技巧分享
2011/09/20 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
jquery常用操作小结
2014/07/21 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python创建模块及模块导入的方法
2015/05/27 Python
python 重定向获取真实url的方法
2018/05/11 Python
python爬取淘宝商品销量信息
2018/11/16 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
如何卸载python插件
2020/07/08 Python
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
个人自荐书
2013/12/20 职场文书
学习标兵获奖感言
2014/02/20 职场文书
捐资助学倡议书
2014/04/15 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
普通党员对照检查材料
2014/08/28 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
优秀班主任材料
2014/12/16 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers