SpringBoot+Vue回显BLOB类型的Oracle数据库

接上一篇文章：SpringBoot+Vue 图片上传保存到类型为BLOB类型的Oracle数据库(数据库可以直接看图片)

SpringBoot+Vue回显BLOB类型的Oracle数据库图片

---

前言

存放到BLOB类型的Oracle数据库的图片回显是需要把字节流转为Base64才可以在前端显示出来

---

前端正文

<img style="width: 200px; height: 270px;border-radius: 6px" :src="'data:image/png;base64,'+form.tx"/>

注意： ‘data:image/png;base64,’ 这一段代码代码是需要加的，不然图片解析不出来。其实这就是所谓的 Data URI scheme。 直译过来的意思是：URI 数据处理方案…
Data URI scheme支持的类型有：

data: 文本数据
data: text/plain, ------- 文本数据
data: text/html, -------- HTML代码
data: text/html;base64, -------- base64编码的HTML代码
data: text/css, ---------- CSS代码
data: text/css;base64, ---------- base64编码的CSS代码
data: text/javascript, ------------ Javascript代码
data: text/javascript;base64, --------- base64编码的Javascript代码
data: image/gif;base64, ---------------- base64编码的gif图片数据
data: image/png;base64, -------------- base64编码的png图片数据
data: image/jpeg;base64, ------------- base64编码的jpeg图片数据
data: image/x-icon;base64, ---------- base64编码的icon图片数据

后台正文

代码如下（示例）：

	/**
	* 查询教师信息
	*
	* @param zgh 教师信息主键
	* @return 教师信息
	*/
    @Override
    public JsJsxxb selectJsJsxxbByZgh(String zgh){
        //先查询图片表 有数据就返回回来
        JsJszpb jsJszpb = jsJszpbMapper.selectJsJszpbByZgh(zgh);
        //图片表有数据 不为空
        if (jsJszpb != null){
            String zp_string = "";
            //存放字节流的byte数组
            byte[] zpBlob = jsJszpb.getZp();
            if (Optional.ofNullable(zpBlob).isPresent()){
                //转Base64
                byte[] encodeBase64 = Base64.encodeBase64(zpBlob);
                //转字符串Base64
                zp_string = new String((encodeBase64));
            }
            //查询出教师信息数据 将教师图片设置到教师信息实体类的tx里面
            JsJsxxb jsJsxxb = jsJsxxbMapper.selectJsJsxxbByZgh(zgh);
            jsJsxxb.setTx(zp_string);
            return jsJsxxb;
        }else{
            return jsJsxxbMapper.selectJsJsxxbByZgh(zgh);
        }
    }

zp_string就是一个String类型的Base64字符串。

String zp_string = "";
//存放字节流的byte数组
byte[] zpBlob = jsJszpb.getZp();
if (Optional.ofNullable(zpBlob).isPresent()){
    //转Base64
    byte[] encodeBase64 = Base64.encodeBase64(zpBlob);
    //转字符串Base64
    zp_string = new String((encodeBase64));
}

这段代码就是将字节流转为Base64字符串。赋值到实体类中返回前端

前端展示

总结

BLOB类型的图片回显需要先转为Base64的字符串，再加上URI 数据处理方案（:src=“‘data:image/png;base64,’+form.tx”）用img解析就出来了