springmvc结合base64存取图片到mysql

简介:

1.jsp通过MultipartFile上传图片到后台

2.后台把上传的图片通过base64转换成字符串存到mysql

3.从mysql读取图片字符串,通过base64反转成byte数组,再显示到jsp

1.mysql表结构



2.影射对象

[java] view
plain copy

 print?

package net.spring.model;  

  

import javax.persistence.Column;  

import javax.persistence.Entity;  

import javax.persistence.Id;  

import javax.persistence.Table;  

  

@Entity  

@Table(name = "t_img")  

public class Img {  

    @Id  

    private String name;  

    @Column  

    private String imgData;  

  

    public String getImgData() {  

        return imgData;  

    }  

  

    public void setImgData(String imgData) {  

        this.imgData = imgData;  

    }  

  

    public String getName() {  

        return name;  

    }  

  

    public void setName(String name) {  

        this.name = name;  

    }  

  

}  

3.数据库操作语句

[java] view
plain copy

 print?

/** 

 * 插入图片 

 */  

@Override  

public void savaImg(Img img) {  

    try{  

        this.getHibernateTemplate().save(img);  

    }catch(Exception e){  

        e.printStackTrace();  

    }  

}  

  

/** 

 * 取得图片 

 */  

@Override  

public Img getImg(String name) {  

    Query query = this.getSession().createQuery(  

            "from Img a where a.name = '" + name + "'");  

    return (Img)query.uniqueResult();  

}  

4.controller

通过MultipartFile上传文件,具体技术可以看这篇文章点击打开链接

[java] view
plain copy

 print?

/** 

 * 上传文件 

 * @param file 

 * @param request 

 * @param map 

 * @return 

 */  

@ResponseBody  

@RequestMapping(value = "uploadForm")  

public String uploadMethod(@RequestParam("file") MultipartFile file,  

        HttpServletRequest request, Map<String, Object> map) {  

  

    if (!file.isEmpty()) {  

        try {  

            BASE64Encoder encoder = new BASE64Encoder();    

            // 通过base64来转化图片  

            String data = encoder.encode(file.getBytes());  

              

            Img mImg = new Img();  

            mImg.setName("zzzz1");  

            mImg.setImgData(data);  

            mTestService.savaImg(mImg);  

              

        } catch (Exception e) {  

            e.printStackTrace();  

        }  

    } else {  

        map.put("message", "文件为空");  

        return "errorView";  

    }  

    return null;  

}  

[java] view
plain copy

 print?

/** 

 * 取得图片 

 * @param request 

 * @param response 

 */  

@RequestMapping("getImg")  

public void getImg(HttpServletRequest request,HttpServletResponse response){  

    String imgId = request.getParameter("imgId");  

    Img img = mTestService.getImg(imgId);  

    String data = img.getImgData();  

    BASE64Decoder decoder = new BASE64Decoder();    

    try {  

        byte[] bytes = decoder.decodeBuffer(data);  

        for (int i = 0; i < bytes.length; ++i) {    

               if (bytes[i] < 0) {// 调整异常数据    

                   bytes[i] += 256;    

               }    

           }  

        ServletOutputStream out = response.getOutputStream();  

        out.write(bytes);  

           out.flush();  

           out.close();  

    } catch (IOException e) {  

        e.printStackTrace();  

    }    

}  

5.jsp

[javascript] view
plain copy

 print?

$(document).ready(function() {  

     $("#imgId").click(function(){  

            var width = $(this).width();  

            if(width==200)  

            {  

             // 图片变大  

                $(this).width(500);  

                $(this).height(500);  

                  

                // 设值图片到屏幕中间  

             $(this).css("position","absolute");  

             $(this).css("top", ( $(window).height() - $(this).height() ) / 2+$(window).scrollTop() + "px");   

             $(this).css("left", ( $(window).width() - $(this).width() ) / 2+$(window).scrollLeft() + "px");   

            }  

            else  

            {  

             // 还原成原来大小  

             $(this).css("position","static");   

             $(this).css("top","0px");   

             $(this).css("left","0px");   

                $(this).width(200);  

                $(this).height(200);  

            }  

        });  

});  

[javascript] view
plain copy

 print?

<span style="white-space:pre">    </span>function getImg(){  

<span style="white-space:pre">        </span>$("#imgId").attr('src',"getImg.html?imgId=zzzz1");   

<span style="white-space:pre">    </span>}  

[html] view
plain copy

 print?

<input type="button" value="getImg" onclick="getImg()"/>   

<img width="200px" height="200px" src="" id="imgId">  

6.效果图



7.base64转换图片后在数据库里的数据