1、数据库建表语句:其中红色部分为存储图片的字段;
CREATE TABLE `show_picture` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
`type` varchar(20) DEFAULT NULL COMMENT '类型,作品:WORK ;客片:GUEST',
`title` varchar(20) DEFAULT NULL COMMENT '标题',
`description` varchar(200) DEFAULT NULL COMMENT '描述',
`style_type` int(11) DEFAULT NULL COMMENT '对应风格分类',
`place_type` int(11) DEFAULT NULL COMMENT '对应场景分类',
`enjoy_type` int(11) DEFAULT NULL COMMENT '对应欣赏分类',
`picture` longblob COMMENT '对应图片',
`for_first_pic` longblob COMMENT '对应首页图片(只对服务报价推荐到首页有效)',
`for_related_pic` longblob COMMENT '对应相关作品详细页面图片',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`sort` int(11) DEFAULT '0' COMMENT '排序',
`var_temp` varchar(20) DEFAULT NULL COMMENT '字符型备用字段',
`int_temp` int(11) DEFAULT NULL COMMENT '数字型备用字段',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2、自动生成实体类
public class ShowPicture {
private Integer id;
private String type;
private String title;
private String description;
private Integer styleType;
private Integer placeType;
private Integer enjoyType;
private Date createTime;
private Integer sort;
private String varTemp;
private Integer intTemp;
}
这是基本字段,具体存储图片的为blog类型,自动生成代码时,blog类型的字段会自动生成子类继承基本类
public class ShowPictureWithBLOBs extends ShowPicture {
private byte[] picture;
private byte[] forFirstPic;
private byte[] forRelatedPic;
}
set、get方法自己完善;
3、因为前台传到controller中的附件要以MultipartFile类型,所以设置一个同样继承基本类的子类,和ShowPictureWithBLOBs字段一样,字段类型为MultipartFile,具体如下:
public class ShowPictureWithBLOBsUseMultipartFile extends ShowPicture {
private MultipartFile pictureFile;
private MultipartFile forFirstPicFile;
private MultipartFile forRelatedPicFile;
}
4、前台图片上传控件
<div id = "uploadFile2">
<div class="form-group mno file">
<label for="forFirstPicFile" class="col-sm-1 control-label" style="text-align:left;width:100px;">对应首页图片</label>
<div class="col-sm-3" style="margin-top:7px;">
<input id="forFirstPicFile" name="forFirstPicFile" type="file">
</div>
</div>
</div>
其中,要注意的是form表单类型要multipart类型,如下
<form id="myform1" action="$!{appRoot}/showpic/$!{method}.do" enctype="multipart/form-data" class="form-horizontal" role="form" method="post">
5、controller层接收并处理数据,
@RequestMapping(value="/create.do",method=RequestMethod.POST)
public String showpic_create_post(Model model,
ShowPictureWithBLOBsUseMultipartFile showPic) throws IOException{
logger.info("showpic_create_post start");
model.addAttribute("zhStr", ShowPictureType.valueOf(showPic.getType()));
//将相应文件(图片)取得inputStream
InputStream isPictureFile = showPic.getPictureFile().getInputStream();
InputStream isForFirstPictureFile = showPic.getForFirstPicFile().getInputStream();
InputStream isForRelatedPictureFile = showPic.getForRelatedPicFile().getInputStream();
byte[] pictureData = new byte[(int) showPic.getPictureFile().getSize()];
byte[] forFirstPictureData = new byte[(int) showPic.getForFirstPicFile().getSize()];
byte[] forRelatedPictureData = new byte[(int) showPic.getForRelatedPicFile().getSize()];
isPictureFile.read(pictureData);
isForFirstPictureFile.read(forFirstPictureData);
isForRelatedPictureFile.read(forRelatedPictureData);
/**
* 将ShowPictureWithBLOBsUseMultipartFile类型的实体转换成能够存入到数据库中的ShowPictureWithBLOBs类型
*/
ShowPictureWithBLOBs spwb = new ShowPictureWithBLOBs();
spwb.setCreateTime(showPic.getCreateTime());
spwb.setEnjoyType(showPic.getEnjoyType());
spwb.setForFirstPic(forFirstPictureData);
spwb.setForRelatedPic(forRelatedPictureData);
spwb.setId(showPic.getId());
spwb.setIntTemp(showPic.getIntTemp());
spwb.setPicture(pictureData);
spwb.setPlaceType(showPic.getPlaceType());
spwb.setSort(showPic.getSort());
spwb.setStyleType(showPic.getStyleType());
spwb.setTitle(showPic.getTitle());
spwb.setType(showPic.getType());
spwb.setVarTemp(showPic.getVarTemp());
showPicBiz.createNewShowPic(spwb);
logger.info("showpic_create_post end");
return "redirect:/showpic/list.do?type="+spwb.getType();
}
到此,已经能把数据存入到数据库中。
6、将图片取出并显示到页面。后台处理
@RequestMapping(value="/getPhoto.do",method=RequestMethod.GET)
public void getPhotoById (int id, int width, int height, final HttpServletResponse response) throws IOException{
ShowPictureWithBLOBs entity = this.showPicBiz.findShowPicById(id);
byte[] data = entity.getPicture();
if (width != 0 && height != 0) {
data = scaleImage(data, width, height);
}
response.setContentType("image/jpeg");
response.setCharacterEncoding("UTF-8");
OutputStream outputSream = response.getOutputStream();
InputStream in = new ByteArrayInputStream(data);
int len = 0;
byte[] buf = new byte[1024];
while ((len = in.read(buf, 0, 1024)) != -1) {
outputSream.write(buf, 0, len);
}
outputSream.close();
}
/**
* 显示缩微图
* TODO
* @param data
* @param width
* @param height
* @return
* @throws IOException<br/>
* ============History===========<br/>
* 2014年11月27日 Administrator 新建
*/
public static byte[] scaleImage(byte[] data, int width, int height) throws IOException {
BufferedImage buffered_oldImage = ImageIO.read(new ByteArrayInputStream(data));
int imageOldWidth = buffered_oldImage.getWidth();
int imageOldHeight = buffered_oldImage.getHeight();
double scale_x = (double) width / imageOldWidth;
double scale_y = (double) height / imageOldHeight;
double scale_xy = Math.min(scale_x, scale_y);
int imageNewWidth = (int) (imageOldWidth * scale_xy);
int imageNewHeight = (int) (imageOldHeight * scale_xy);
BufferedImage buffered_newImage = new BufferedImage(imageNewWidth, imageNewHeight, BufferedImage.TYPE_INT_RGB);
buffered_newImage.getGraphics().drawImage(buffered_oldImage.getScaledInstance(imageNewWidth, imageNewHeight, BufferedImage.SCALE_SMOOTH), 0, 0, null);
buffered_newImage.getGraphics().dispose();
ByteArrayOutputStream outPutStream = new ByteArrayOutputStream();
ImageIO.write(buffered_newImage, "jpeg", outPutStream);
return outPutStream.toByteArray();
}
7、前台显示
<img src="$!{appRoot}/showpic/getPhoto.do?id=$!showpic.id&width=150&height=150"/>