当前位置:Gxlcms > JavaScript > node简单实现更改头像功能代码分享

node简单实现更改头像功能代码分享

时间:2021-07-01 10:21:17 帮助过:17人阅读

更换头像的功能我们再熟悉不过了,本文主要介绍了node简单实现一个更改头像功能的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

思路

首先,当用户点击上传头像,更新头像的时候,将头像上传到项目的一个文件夹里面(我是存放在项目的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部分


路由部分,使用formidable,这是一个Node.js模块,用于解析表单数据,尤其是文件上传


相关头像:

关于js拖拽上传 [一个拖拽上传修改头像的流程]

thinkphp批改头像

关于js拖拽上传 [一个拖拽上传修改头像的流程]_javascript技巧

以上就是node简单实现更改头像功能代码分享的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行