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类型接收文件，可以直接获取到文件的输入流，直接读取，再写入到文件输出流

依赖：

        
		
			commons-fileupload
			commons-fileupload
			1.3.3
		
		
			commons-io
			commons-io
			2.4
		

 用@Value读取配置文件中自定义的文件上传保存目录，按需修改。

 

3.登录就直接从后台直接把用户反给前端

登录页拿到user转成json格式存入sessionStorage，跳转得到欢迎界面。

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

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

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

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

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