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

最新推荐文章于 2023-05-20 17:50:51 发布

JuLi距离

最新推荐文章于 2023-05-20 17:50:51 发布

阅读量2.1k

点赞数

分类专栏： web前端 nodejs 文章标签： express 图片头像上传

本文链接：https://blog.csdn.net/qq_33699981/article/details/78920854

版权

本文记录了使用Node.js的Express框架实现头像上传功能的过程。通过用户上传图片，将其存储到项目文件夹并重命名，同时更新用户表中的图像路径，接着更新session中的头像路径。在用户页面中，通过获取session信息动态刷新头像显示。

摘要由CSDN通过智能技术生成

前言

一直想写这篇文章，无奈由于要考试的原因，一直在复习，拖延到现在才写��，之前用 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=