时间:2021-07-01 10:21:17 帮助过:17人阅读
思路
首先,当用户点击上传头像,更新头像的时候,将头像上传到项目的一个文件夹里面(我是存放在项目的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网其它相关文章!