添加时上传图片
我使用的是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格式的数据