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

最新推荐文章于 2024-05-10 09:01:43 发布
最新推荐文章于 2024-05-10 09:01:43 发布
阅读量5.1k 收藏 46
点赞数 9
分类专栏： springboot 文章标签： vue springboot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38454165/article/details/106824161
版权

会就很简单，不会就很难。

思路(最后附源码）：

1.注册上传头像，

 

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

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

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

window.URL.createObjectURL(file.raw);方法生成本地文件的url，供临时预览。文件被删除或移动，或者session刷新后，此url都会失效。如果imgUrl存在

最低0.47元/天 解锁文章
浔者
关注
  • 9
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Spring Boot 项目如何实现上传头像功能 + “小红书“ 项目案例
CYK_byte的博客
04-12 2551
SpringBoot 项目如何实现上传图片功能？
SpringBoot2+Spring Security+Vue+ElementUI+蚂蚁金服AntV
04-10
适用人群所有的IT从业者，尤其适合快速掌握新技术，快速增长工作经验人群，对教育公平，教育公益，教育爱心公益人士提供完整的课程源代码，前端 后端点击视频观看，在右侧的【课件】中下载，所有代码都是线下班级运行很多次额，请放心购买。 课程概述该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目，采用分布式，多模块，前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术说明Spring Boot2MVC框架 开发的一站式解决方案Spring Security5 认证和授权框架MyBatisPlus3.3.1 基于 MyBatis 框架的快速研发框架MyBatisCode工具生成 MyBatis 相关代码Jackson提供了处理 JSON 数据的工具Lombok简化对象封装工具 Druid   数据库连接池 【前端技术】Vue       互联网最火的前端框架Vue Router路由框架Vuex全局状态管理框架Axios前端 HTTP 框架Element UI前端 UI 框架Vue Element Admin前端模板Antv  蚂蚁金服可视化技术，阿里巴巴可视化技术，天猫，淘宝，支付宝，花呗均使用AntV【开发工具】IntelliJ IDEA开发 IDESQLyog数据库连接客户端PostmanHTTP 请求工具【开发环境】工具版本JDK1.8MySQL5.7
在springboot项目中编写超级简单的用户头像上传与回显的接口
m0_65206614的博客
10-12 193
springboot用户头像上传与回显接口
VUE项目图形验证码功能组件
weixin_45007276的博客
05-10 179
【代码】VUE项目图形验证码功能组件。
vue+elmentUI+springboot实现阿里云oss的图片上传
qq_46119030的博客
01-22 2175
OSS图片上传步骤一、获取OSS的相关配置①创建阿里云的账号，购买oss②创建Bucket，获取AccessKey ID和AccessKey Secret二、后端代码解读①依赖和application.yml的配置②配置类AliyunOssConfig③service层fileUploadService③Controller层③postman上传文件测试三、前端代码 一、获取OSS的相关配置 前几天研究了一下阿里云的oss图片上传，觉得网上的代码要不就是没有写完，要不就是不够全面。于是自己整理了一下，后端的
springboot用户上传头像
iceforg123的博客
03-25 2671
用户上传头像流程 1.图片上传至服务器 @PostMapping("upload") public String uploadHeader(MultipartFile headerImage, Model model) { //判断图片是否为空 if (headerImage == null) { model.addAttribute("error", "请先上传图片！"); return "/site/setting"; } //判断图片是
使用Vue2+ElementUI+SpringBoot实现用户头像上传
m0_51225410的博客
07-03 597
Vue2：一套用于构建用户界面的渐进式JavaScript框架。ElementUI：基于Vue2的组件库，提供了丰富的UI组件。SpringBoot：用于构建Java后端应用程序的快速开发框架。
vue+Springboot实现头像预览及上传
weixin_46267824的博客
07-19 1464
使用el-upload组件和springboot完成头像的预览及上传
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rd
07-09
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rdis等技术实现。
vue+element-ui+axios实现图片上传
12-04
本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
基于vue + element-ui的后台管理系统
10-19
本项目是vue + element-ui构建的后台管理系统，是后台项目node-elm的管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登陆、管理数据、权限验证等功能。 注：项目预览地址和接口需要使用...
后台管理员系统，主要包含了学生选课和人员管理，基于Vue+Element-ui+SpringBoot+Mybatis
最新发布
05-20
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
vue-xuAdmin：vue + element-ui-admin后台权限管理模板演示地址：
02-06
vue + element-ui无限级菜单权限管理后台模板 :house: 作者 :bust_in_silhouette: 倪荣旭 电子邮件： 先决条件 节点> = 6.0.0 npm> = 3.0.0 更新日志 v1.2.5 增加DllPlugin优化生成速度，编译速度缩短yarn ...
Vue+SpringBoot图片上传和下载
weixin_46066635的博客
10-16 719
本方法是使用el-upload上传文件至本地文件夹中，再用WebMvcConfigurer对匹配的URL进行拦截，映射到本地文件夹来展示和下载图片。template页面显示部分： js部分： 上传图片后通过URL.createObjectURL()方法生成一个图片URL，并将img标签的src属性指向这个URL首先建立配置类继承WebMvcConfigurer并重写addResourceHandlers方法： addResourceHandler()里的是虚拟路径，addResourceLoca
SpringBoot项目实战杂货铺登录注册功能附邮箱验证以及头像绑定（三）
肝铁侠的博客
10-17 1428
在常规情况下的网商项目中，会用到Spring Cloud微服务，这里将在下一期中对Spring Cloud微服务的五大组件进行一个介绍。 在上一期中，SpringBoot项目实战杂货铺登录功能（二）杂货铺更新了登录功能，今天带来注册功能页面，在注册界面中加入了邮箱绑定，以及头像的设置。 我们由登录界面点击去注册，切换到注册模块的div： 账号根据数据库中的账号一次递增，默认加载出来，显示在账号输入框，且为不可编辑状态。 邮箱验证 输入邮箱，点击发送验证码后，所填写的邮箱就会收到一个随机六位数的验证码，同
SpringBoot OSS实战之用户头像上传
`or 1 or 不正经の泡泡
10-18 2394
已经开始对写接口产生厌烦了，毫无技术含量，不过也是最近把用户的比较核心的功能做出来了。准备开始写一些主要功能了，其实这个更好写，我打算搞两个版本，一个是lite版本就是能用，技术实现简单，但是资源消耗低，还有就是完整版本，适合有软妹币的时候玩玩。那么十月十更的第九更就要出来了。那么第十更自然就是咱们的TSP的这个不会鸽的，但是发布的话要等，等下个礼拜，一方面是我最近没写（其实写也快，顶多一上午）还有一方面是作为作业交上去的。那么还是不废话吧，发车了。首先的话要玩这个先对OSS服务进行整合，这个的话，在懒人系
Vue+elementUI+SpringBoot项目-上传用户头像（1）
一个还在上学的程序缘
04-18 1883
前言   一直感觉头像上传是个非常基础简单的功能，可是实现此功能用了将近2天的时间，所以记录下走过的坑。   前端采用vue+elementui,后端采用springboot。本篇文章先介绍前端文件的上传，后一篇介绍后端如何进行接收和存储的。 实现 （1）首先用element ui为我们定义的头像上传组件。 <el-upload class="avatar-uploader" action="#" accept=".jpg,.jpeg
基于 springboot + vue 的 element-ui 的 upload 组件头像上传功能
qq_45803593的博客
07-03 1268
基于 springboot + vue 的 element-ui 的 upload 组件头像上传，为了方便我们自己本地测试使用，我们将文件上传至自己电脑的磁盘中，由于项目是前后端分离的，所以我们会直接传给前端该文件的网络地址，同时后端也会将文件地址与请求地址进行映射方便前端进行展示。......
springboot +vue +element-ui实现头像上传
04-28
要实现头像上传，可以结合Spring Boot后端框架，Vue前端框架以及Element UI组件库进行实现。 首先，在Vue前端页面中，可以使用Element UI中的Upload组件实现文件上传功能。可以在页面中定义一个Upload组件，设置action属性为上传接口的URL，设置headers属性为请求头部信息，设置on-success属性为上传成功后的回调函数。具体代码如下： ``` <template> <div> <el-upload class="avatar-uploader" action="/api/uploadAvatar" :headers="{ Authorization: 'Bearer ' + token }" :show-file-list="false" :on-success="handleSuccess"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </template> <script> import { getToken } from '@/utils/auth' export default { data() { return { imageUrl: '', token: getToken() } }, methods: { handleSuccess(response) { this.imageUrl = response.data.url } } } </script> ``` 其中，token是用于认证的令牌，可以通过getToken函数获取。handleSuccess函数是上传成功后的回调函数，其中response.data.url表示上传成功后的图片URL。 然后，在Spring Boot后端接口中，可以使用Spring MVC的注解@RequestParam来接收上传的文件。具体代码如下： ``` @RestController @RequestMapping("/api") public class UploadController { @PostMapping("/uploadAvatar") public JsonResult uploadAvatar(@RequestParam("file") MultipartFile file) throws IOException { // 处理上传的文件 return JsonResult.ok("url", "http://www.example.com/avatar.jpg"); } } ``` 其中，@PostMapping注解表示接收POST请求，@RequestParam("file")注解表示接收名为file的文件参数。处理上传的文件后，可以返回一个JsonResult对象，其中包含上传成功后的图片URL。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值