前端vue项目获取当前登录用户id以及后端将MultipartFile转换为Base64字符串

现在的需求，用户在前端更改头像，1、获取到用户的id。2、将图片转换为Base64编码

首先需要知道是修改谁的头像，由于不是专业前端，这块的确不是很熟，网上查到的方法如下：

但是我的storage里面什么都没有，回到项目本身，我发现在src/store/modules下的user.js里面，有如下方法：

应该是在登录时候，将用户信息进行了一个存储，我看到这里存储了头像、用户角色等信息，猜测应该也能存储用户id的信息，于是加上如下代码：

在上级目录getters.js里加上：

然后在需要获取用户id的页面，先引入store：

import store from '@/store'

图片上传是基于elementui的upload封装的上传组件，在页面进行提交的时候，将用户id作为参数进行传递：通过store获取用户id：

store.getters.id

这里应该就完成了第一步，获取用户id，然后将上传的头像在后端进行转换为base64编码，存储到数据库中：
这里直接贴上工具类：

public class Base64Utils {public static String fileToBase64(MultipartFile file){if (file.isEmpty() || StrUtil.isEmpty(file.getOriginalFilename())) {return "文件为空";}try {byte[] imageBytes;String base64EncoderImg="";try {imageBytes = file.getBytes();BASE64Encoder base64Encoder =new BASE64Encoder();/*** 1.Java使用BASE64Encoder 需要添加图片头（"data:" + contentType + ";base64,"），*   其中contentType是文件的内容格式。* 2.Java中在使用BASE64Enconder().encode()会出现字符串换行问题，这是因为RFC 822中规定，*   每72个字符中加一个换行符号，这样会造成在使用base64字符串时出现问题，*   所以我们在使用时要先用replaceAll("[\\s*\t\n\r]", "")解决换行的问题。*/base64EncoderImg = "data:" + "image/jpg" + ";base64," + base64Encoder.encode(imageBytes);base64EncoderImg = base64EncoderImg.replaceAll("[\\s*\t\n\r]", "");} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return base64EncoderImg;//return CommonResult.success("encode");} catch (Exception e) {return "转换失败";}}
}

引用如下：

需要注意的是，工具类中的方法，如果使用static修饰，可以直接通过类名+方法名进行调用，也可以先new一个工具类的对象，再通过对象+方法名进行调用，但是如果没有用static修饰，则只能通过new工具类对象的方法这个方式进行调用。原因如下：

static修饰的成员是类成员：其调用可以用“类名。成员名”“对象名。成员名”这两种方式调用无差别。
非static修饰的成员是实例（对象）成员：其调用必须用“对象名。成员名”调用。

运行结果：首先上传头像：

可以看到返回的是头像的base64编码和用户id，验证编码：

参考链接：后端接收MultipartFile转换为Base64字符串

前端vue项目获取当前登录用户id以及后端将MultipartFile转换为Base64字符串相关推荐

拦截器HandlerInterceptor+方法参数解析器HandlerMethodArgumentResolver用于统一获取当前登录用户信息
文章目录前言一.拦截器+方法参数解析器是什么? 二.具体实现步骤 1.自定义权限拦截器LoginInterceptor拦截所有request请求,并将token解析为currentUser,最终 ...
SpringBoot+Vue项目中实现登录验证码校验
SpringBoot+Vue项目中实现登录验证码校验在各大项目中,为保证数据的安全性,通常在登录页面加入验证码校验,以防止爬虫带来的数据泄露危机.本文将介绍在前后端分离的项目中,怎样实现图形验证码校 ...
Django之使用自定义用户表(AbstractUser)/自定义登录验证(jwt)/获取当前登录用户
基本步骤: 一.自定义用户表: 1.自定义的用户表继承AbstractUser: 2.settings.py添加配置,指向用户表:AUTH_USER_MODEL = 'myUser.Account'( ...
C4C和CRM里获取当前登录用户分配的Organization Unit信息
C4C 如何查看某个用户分配的组织单元ID: 在Employee的Organization Data区域内看到分配的组织名称,如下图红色下划线所示: 现在的需求就是使用ABSL获取当前登录用户分配的O ...
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
前端Vue项目实现CDN加速
前端Vue项目实现CDN加速我们在开发前端项目的时候难免会遇到请求响应慢,页面数据渲染慢,等等问题.浏览器从服务器上下载 CSS.js 和图片等文件时都要和服务器连接,而大部分服务器的带宽有限,如果 ...
获取当前登录用户的IP地址代码
*&---------------------------------------------------------------------* *& Report Z_IP * *& ...
Cuba 获取当前登录用户
在Cuba中获取当前登录用户 //注入UserSessionSource @Inject private UserSessionSource userSessionSource; //获取用户名 us ...
Jenkins自动化部署前端Vue项目
Jenkins自动化部署前端Vue项目前言安装NodeJs 下载NodeJs 安装NodeJs npm配置 Jenkins配置NodeJs 安装NodeJs插件配置NodeJs 新建及配置任务 ...

前端vue项目获取当前登录用户id以及后端将MultipartFile转换为Base64字符串

前端vue项目获取当前登录用户id以及后端将MultipartFile转换为Base64字符串相关推荐

最新文章

热门文章