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数据库。

博主有话说：每天进步一点点。自律。坚持。