SpringBoot+Vue 图片上传保存到类型为BLOB类型的Oracle数据库(数据库可以直接看图片)
前言：项目中遇到需要将图片保存到Oracle数据库，并且数据库里面可以直接看图像。虽然这种方式不如直接存储url方便，回显也比较慢。但是后面可能会把图像同步给第三方，或者转库。所以要求在数据库里面存储图像
前端正文：
<image-upload class="picture_upload" style="width: 200px; height: 270px" :limit='1' v-model="form.tx"/>
若依封装的组件默认宽高是148px的，是一个正方形，我们存储的是一个图像，是5:7的证件照，所以宽高可以设置为200px , 280px 。这里需要注意的是上传组件还有一个隐藏层，就是鼠标悬浮在上面的时候会出现的层（隐藏层是预览和删除按钮），也是需要设置宽高的，而且这两层的宽高的设置应该是从你的页面里面。如果直接去依赖里面改的话也可以，但是好像只能从你本地显示出来样式，其他同事用这个样式的组件的话(就是200*280样式的)不显示这个你设置的宽高，因为代码提交到版本控制器的时候（如SVN）依赖是没法上传的，所以想到了把样式加在了页面里面，修改了这两个样式之后中间的加号就会移动到左上角，现在只需要将加号外面的一层设置为盒子居中显示就可以了。
<style>
.el-upload--picture-card {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 270px;
}
.el-upload-list__item-actions {
width: 200px;
height: 270px;
}
.li.el-upload-list__item.is-success {
width: 200px;
height: 270px;
margin-left: 200px;
}
.component-upload-image .hide {
width: 200px;
height: 270px;
}
.el-upload-list__item.is-success {
width: 200px;
height: 270px;
}
</style>
这里我设置的是270px。还有就是图像限制上传一张所以 :limit=‘1’ 。需要注意" : " 不加会报错。v-model 是双向绑定。
红框里面的就是我们上传之后的路径。" /profile " 是可以更改的，就是在我们后台application.yml文件里面
所以我们传给后台的实体类里面图像的路径就是上面红框里面的，图像是真实存在的。
此时我们需要对图像做处理存储到数据库了…
后台正文：
/**
* 新增教师信息
*/
@PreAuthorize("@ss.hasPermi('jsgl:jsxxb:add')")
@Log(title = "教师信息", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@RequestBody JsJsxxb jsJsxxb) throws IOException {
return toAjax(jsJsxxbService.insertJsJsxxb(jsJsxxb));
}
这是controller里面的，继续往下。
/**
* 新增教师信息
*
* @param jsJsxxb 教师信息
* @return 结果
*/
public int insertJsJsxxb(JsJsxxb jsJsxxb);
这是seivice里面的，继续往下。
/**
* 新增教师信息
*
* @param jsJsxxb 教师信息
* @return 结果
*/
@Override
@ValidationID(field = "zgh", databaseName = "JS_JSXXB", message = "教师职工号不能重复")
public int insertJsJsxxb(JsJsxxb jsJsxxb) {
if (StringUtils.isNotEmpty(jsJsxxb.getTx())){
JsJszpb jsJszpb = new JsJszpb();
jsJszpb.setZgh(jsJsxxb.getZgh());
jsJszpb.setZp(GenerateImageUtil.GetImgDate(jsJsxxb.getTx()));
jsJszpbMapper.insertJsJszpb(jsJszpb);
}
return jsJsxxbMapper.insertJsJsxxb(jsJsxxb);
}
这是impl里面的。我是先在这里做了判断，图像不为空的时候会将图像存到图像表里面。
GenerateImageUtil.GetImgDate(jsJsxxb.getTx())
就是这段代码。jsJsxxb.getTx()就是上面红色框框里面的路径 /profile/upload/2022/09/08/微信图片_20220908194922_20220908195545A002.png
我们将路径传入工具类，继续往下。
package com.ms.jwxt.config;
import com.ruoyi.common.utils.StringUtils;
import org.apache.commons.codec.binary.Base64;
import sun.misc.BASE64Decoder;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.HashMap;
/**
* 生成图片工具类
* Created by gs01 on 2022-09-07.
*/
public class GenerateImageUtil {
/**
* 图片路径转byte字节数组
*
*/
public static byte[] GetImgDate(String txPath) {
//去掉图片路径txPath以 '/profile' 开头的 ,
String newStr = txPath.replaceFirst("^/profile*","");
//拼接新的图片路径(原因是系统找不到图片路径，所以从新做了拼接)
String newPath = "D:/ruoyi/uploadPath"+newStr;
InputStream in = null;
byte[] data = null;
// 读取图片字节数组
try {
in = new FileInputStream(newPath);
data = new byte[in.available()];
in.read(data);
in.close();
} catch (IOException e) {
e.printStackTrace();
}
return data;
}
}
我们传进来之后就会利用这个方法生成一个字节流存到byte[] 中，因为直接去路径下找不到文件，我就从新给他拼接了一下，去掉了以 ’ /profile ’ 开头的 ，然后拼接的，就会找到文件了。
此时实体类需要的byte [] 类型的我们就生成了，现在直接存进数据库就可以了。BLOB类型的Oracle数据库。
博主有话说：每天进步一点点。自律。坚持。