SpringMVC Mybatis MySQL實現圖片存儲到數據庫及讀取顯示縮微圖

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"/>


                                 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章