node简单实现一个更改头像功能的示例

 更新时间:2017年12月29日 09:46:38   作者:Moorez  
本篇文章主要介绍了node简单实现一个更改头像功能的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

一直想写这篇文章,无奈由于要考试的原因,一直在复习,拖延到现在才写🤣,之前用 node 的 express 框架写了个小项目,里面有个上传图片的功能,这里记录一下如何实现(我使用的是 ejs)📝

思路

首先,当用户点击上传头像,更新头像的时候,将头像上传到项目的一个文件夹里面(我是存放在项目的public/images/img里面),并且将图像名重命名(可以以时间戳来命名)。

同时图片在项目的路径插入到用户表的当前用户的 userpicturepath 里面

然后更新用户的 session,将图片里面的路径赋值给 session 的里面的picture属性里面

<img> 的 src 获取到当前用户的session里面的 picture 的值,最后动态刷新页面头像就换成了用户上传的头像了

实现效果

代码

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);
      });
    }
  });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • node 使用 nodemailer工具发送验证码到邮箱

    node 使用 nodemailer工具发送验证码到邮箱

    最近闲着没事,我就在练习使用node和mysql编写接口,计划写一个完整的vue系统,这篇文章主要介绍了node 使用 nodemailer工具发送验证码到邮箱,需要的朋友可以参考下
    2023-10-10
  • 详解Node.js服务器静态资源处理

    详解Node.js服务器静态资源处理

    静态资源服务器指的是不会被服务器的动态运行所改变或者生成的文件,本文主要为大家详细介绍了Node.js服务器静态资源处理的相关知识,需要的可以了解下
    2024-04-04
  • Node.js操作MySQL8.0数据库无法连接的问题解决

    Node.js操作MySQL8.0数据库无法连接的问题解决

    使用node.js连接数据库MySQL 8时候,显示报错 ER_NOT_SUPPORTED_AUTH_MODE,本文就来介绍一下解决方法,感兴趣的可以了解一下
    2023-10-10
  • Electron调用外接摄像头并拍照上传实现详解

    Electron调用外接摄像头并拍照上传实现详解

    这篇文章主要为大家介绍了Electron调用外接摄像头并拍照上传实例实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Node.js包管理器代理工具Verdaccio轻松创建管理本地npm包仓库

    Node.js包管理器代理工具Verdaccio轻松创建管理本地npm包仓库

    这篇文章主要为大家介绍了Node.js包管理器代理工具Verdaccio轻松创建管理本地npm包仓库的使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • Node.js报错信息Error: Cannot find module 'XXX'问题及解决

    Node.js报错信息Error: Cannot find module 'XXX'问题及解

    这篇文章主要介绍了Node.js报错信息Error: Cannot find module 'XXX'问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • nodejs创建简易web服务器与文件读写的实例

    nodejs创建简易web服务器与文件读写的实例

    下面小编就为大家带来一篇node js系列课程-创建简易web服务器与文件读写的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Node.js学习教程之HTTP/2服务器推送【译】

    Node.js学习教程之HTTP/2服务器推送【译】

    这篇文章主要给大家介绍了关于Node.js学习教程之HTTP/2服务器推送的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • nodejs实现的简单web服务器功能示例

    nodejs实现的简单web服务器功能示例

    这篇文章主要介绍了nodejs实现的简单web服务器功能,结合实例形式分析了nodejs构建web服务器的相关监听、响应、数据处理等操作技巧,需要的朋友可以参考下
    2018-03-03
  • 详解npm和cnpm混用的坑

    详解npm和cnpm混用的坑

    有没有遇到过npm和cnpm一起用的时候出现奇奇怪怪的问题呢? 有没有遇到过cnpm在支付宝小程序上面安装包无效?本文就详解一下npm和cnpm混用的坑,感兴趣的可以了解下
    2021-07-07

最新评论