上传图片前端使用base64数据格式展示，后端数据库存储二进制文件

添加时上传图片

我使用的是guns快速开发平台，所以我的前端框架使用的layui

upload.render({
        elem: '#docImg'
        ,url: Feng.ctxPath + '/doctor/upload' //改成您自己的上传接口
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#filePreview').attr('src', result); //图片链接（base64）
            });
        }
  
    });

我自己的上传接口如下：

@RequestMapping(method = RequestMethod.POST, path = "/upload")
    @ResponseBody
    public ResponseData layuiUpload(@RequestPart("file") MultipartFile file, HttpSession session) {
        try {
            byte[] bytes = file.getBytes();
            session.setAttribute("file", bytes);
        } catch (IOException e) {
            e.printStackTrace();
        }
    	return ResponseData.success(0, "上传成功", map);
    }

代码中接受前端返回的MultipartFile，将其转化为byte[]数组，然后传入到session中。

在添加用户接口中取出session中的byte[]数组，并封装到你要添加的实体类中（因为数据库中的数据类型是Blob，所以如果使用逆向工程生成代码记得修改图片的数据类型，改为byte[]）

 @RequestMapping("/addItem")
    @ResponseBody
    public ResponseData addItem(DoctorParam doctorParam,HttpSession session) {
        byte[] file =(byte[]) session.getAttribute("file");
         doctorParam.setDocImg(file);
        this.doctorService.add(doctorParam);
        return ResponseData.success();
    }

添加成功后展示图片

由于数据库中存放的是二进制文件，所以在展示的时候需要将数据库中的二进制文件转为base64格式的文件

我是通过修改接收数据库结果的实体类中的构造方法来实现转换的，代码如下：

public void setDocImg(byte[] docImg) {
        this.docImg = new BASE64Encoder().encode(docImg);
    }

这样在查询出的结果返回给前端的时候实体类中存放的就是base64格式的数据