vue用element-ui后台springboot实现注册上传头像，登录显示头像（图片存至本地）

思路(最后附源码）：

1.注册上传头像，

用element-ui的上传组件，action为默认请求地址，必须写，由于我的项目是前后分离，要跨域，所以不用默认的action

地址，设置为#即可，auto-upload自动上传设为false，自定义点击注册按钮时再上传。

:on-change="handleChange"选择图片改变时触发此方法，我们可以在其中从fileList获得文件，然后利用

window.URL.createObjectURL(file.raw);方法生成本地文件的url，供临时预览。文件被删除或移动，或者session刷新后，此url都会失效。如果imgUrl存在，就显示此图片，并将上传图片的样式隐藏。

注册方法

2.后台接收图片存至本地，数据库存图片名称
用MultipartFile类型接收文件，可以直接获取到文件的输入流，直接读取，再写入到文件输出流

依赖：

<dependency>
           <groupId>commons-fileupload</groupId>
           <artifactId>commons-fileupload</artifactId>
           <version>1.3.3</version>
       </dependency>
       <dependency>
           <groupId>commons-io</groupId>
           <artifactId>commons-io</artifactId>
           <version>2.4</version>
       </dependency>
用@Value读取配置文件中自定义的文件上传保存目录，按需修改。

3.登录就直接从后台直接把用户反给前端
登录页拿到user转成json格式存入sessionStorage，跳转得到欢迎界面。

欢迎页面在加载时获取user，拿到用户名和头像名

然后用el-image显示头像，src直接读取本地磁盘中face头像

这里只有思路，很多细节没有，复制粘贴是跑不起来的。我不会的时候，看别人写的也是总是少关键的东西，或者思路不同，迟迟无法实现，感觉好难，最后做出来后又觉得好简单。要多会一点东西啊。

前端代码：https://gitee.com/seekerliu/lgtour-vue

后端代码：https://gitee.com/seekerliu/lgtour-springboot

————————————————
版权声明：本文为CSDN博主「浔者」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38454165/article/details/106824161