前端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 block
                e.printStackTrace();
            }
            return base64EncoderImg;
            //return CommonResult.success("encode");
        } catch (Exception e) {

            return "转换失败";
        }
    }
}

引用如下:在这里插入图片描述

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

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

运行结果:首先上传头像:
在这里插入图片描述
可以看到返回的是头像的base64编码和用户id,验证编码:
在这里插入图片描述

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

  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值