当前位置:   article > 正文

Vue+Springboot实现用户头像上传及保存_注册用户时涉及用户头像文件保存 如何设计

注册用户时涉及用户头像文件保存 如何设计

最近在开发一套前后端分离的企业管理系统时,需要对系统用户个人信息开放给系统用户自助修改更新,其中用户可以对自己用户名指定一个有个性的头像,这涉及到用户可以访问本地照片文件并进行预处理后上传到后端服务器保存起来,后续登录系统时能从后端数据取到头像图片展示在前端页面中。
对用户的头像管理需要满足以下几点关键需求:
(1)在前端能够预览图片、缩小、放大、截取等预处理操作。
(2)头像图片文件上传到后端服务器进行统一保存,图片文件名需要重新更改为无识别含义的随机文件名。
(3)将头像图片文件的位置保存在用户主文件数据库中,前端通过访问用户信息得到头像文件的url进行显示。
要实现以上需求,我们需要在Vue前端和Spring boot后端进行分别构建相应的功能程序。
一、Vue前端实现部分
本次前端头像图片处理及上传组件采用了 vue-image-crop-upload,该组件小巧简洁,且能支持多语言,但缺点是目前版本只支持PC端,但对于企业内部管理系统的后台管理功能基本也够用,后面有时间了再研究对手机端支持的问题。vue-image-crop-upload是完全开源的组件,我们可以根据自己的需要进行修改或增强此组件的功能。
我在前端通过在用户个人信息的卡片上放了一个“更改头像”的按钮,点击此按钮是将打开image-crop-upload组件进行选择图片文件并上传,上传成功后更新页面上的头像图片,同时根据后端返回的新头像文件名及url更新当前用户的后台数据库。为什么不在上传头像文件的同时就更新后台用户表的数据呢?我主要考虑是将后端图像文件上传的服务做得更加独立,让其可成为可复用的服务功能,因此将用户数据更新的处理交回前端来决定了,这样做不好的地方是前端与后端多交互一次。

vue页面代码:
......

      <div class="box-cente

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/393455
推荐阅读
相关标签
  

闽ICP备14008679号