技术选型

技术选型：
SpringBoot
Vue

技术方案：
采用数据库存储图片的方式，后端接口返回图片的base64流，插入数据库前对图片进行加密，接口查询进行解密。

实现

数据库

字段：head_portrait  
类型：longblob

实体类属性设置

 /** * 头像路径 */
@TableField("head_portrait")
@Lob
private byte[] headPortrait;

业务类处理

import sun.misc.BASE64Decoder;
import org.apache.commons.codec.binary.Base64;

@Override
public Result selectHeadPortraitById(String id) { 
    try { 
        Result result = new Result();
        SysUser sysUser = super.getById(id);
        //Base64解密图片
        byte[] bytes = new BASE64Decoder().decodeBuffer(new String(sysUser.getHeadPortrait()));
        //Base64解析图片流并返回字符串
        String baseString = Base64.encodeBase64String(bytes);
        result.setBody(baseString);
        return result;
    } catch (IOException e) { 
   	 	throw new Result(e.getMessage(), e.getMessage(), e.getMessage());
    }
}

baseString：解密后的图片base64流

扩展：

图片加密

   /** * 对SysUser对象的头像属性进行加密处理 * * @param sysUser */
    private void dealWithHeadPortrait(SysUser sysUser) { 
        //对图片src转换成字节
        byte[] bytes = ImgUtils.dealImgOfByte(sysUser.getHeadPortraitSrc());
        sysUser.setHeadPortrait(bytes);
    }

图片工具类(ImgUtils)

import org.apache.commons.codec.binary.Base64;
import sun.misc.BASE64Encoder;

/** * 工具类：图片 */
public class ImgUtils { 

    /** * 功能：对图片进行转换流，并进行加密 * @param src 图片的src * @return */
    public static byte[] dealImgOfByte(String src){ 
        String str = "data:image/png;base64,";
        String replaceStr = src.toString().replace(str, "");
        //将字符串转换为图片流
        byte[] bytes = Base64.decodeBase64(replaceStr);
        //将图片流Base64加密
        String img = new BASE64Encoder().encode(bytes);
        return img.getBytes();
    }

}

Vue前端

按钮

<el-form-item  prop="headPortrait">
<img  :src="form.headPortrait" style="height:120px;width:120px;border-radius:50%;"/>
</el-form-item>

事件

//显示头像
showImg() { 
    var id = sessionStorage.getItem("userId"); 
    this.$http.post(this.api.userQueryHeadPortraitById+id).then(res => { 
    if (res.data.code == "200") { 
        this.form.headPortrait = "data:image/png;base64,"+res.data.body;
     }
  });
}