SpringMVC从数据库中读取图片显示到JSP页面上

 摸索了一个多星期，终于解决了展示瀑布流照片墙的问题，我一直在思考照片放在哪里，前后想了很多方案。最开始是想把照片放在本地（我的E盘中），而数据库中只存照片的名字，但是这种方案遇到了瓶颈，我不知道img标签的src路径怎么写，不能直接写我本地的路径，在网上看了很多，说是要把图片放到服务器下。但是这样我又遇到了一个问题（问题真是频繁啊），因为我创建的是maven工程，之前把maven工程部署到自己配置的tomcat服务器上的时候各种错误，并且也没解决这个问题，我只好将maven工程部署到了STS自带的tomcat服务器上，那现在要把图片放在服务器的目录下，就需要找到tomcat的webapp目录，自己配置的服务器的话这个目录很好找，但是STS自带的tomcat服务器这个目录我又不知道在哪里，所以这种方案又放弃了。既然我找不到这个目录，网上又说可以把自己的某个文件夹当做服务器下的文件夹，所以把我想修改tomcat的server.xml文件，同样是由于找不到STS自带的tomcat服务器下的这个目录，所以这种方案我研究了很久还是不行。后来我又想着还是把图片转换成二进制流存到数据库里面吧，然后再从数据库中读出来，之前我一直想着把图片信息转换成json字符串传递到前台，传递到前台这个过程我是做到了，但是如何在前台将图片的二进制信息转换成图片显示呢，这个过程我又纠结了很久，我一直在想着在js中如何将图片的二进制流转换成图片显示，但是在网上找了很久之后，大家有的说js不能处理二进制流，这种办法也不适用。

      后来是通过把图片二进制信息写入到HttpServletResponse 的outputStream输出流中来展示的，最开始我只是在SpringMVC的一个controller中来处理这个过程，将这一个controller中同时处理，然后返回jsp页面，发现根本不行啊，下面是我当时错误的代码形式：

[java] view plain copy print?

1.      @RequestMapping(value="/toLookImage",method = RequestMethod.GET)  
2.      public String lookImage(@PathParam("id")int id,HttpServletRequest request,HttpServletResponse response,Model model){  
3.          HttpSession seesion = request.getSession();  
4.            
5.         Photo photo=photoService.getPhotoById(new BigDecimal(id));  
6.         byte[] data=photo.getPhotoData();  
7.         response.setContentType("img/jpeg");  
8.         response.setCharacterEncoding("utf-8");  
9.         try {  
10.               
11.             OutputStream outputStream=response.getOutputStream();  
12.             InputStream in=new ByteArrayInputStream(data);  
13.             int len=0;  
14.             byte[]buf=new byte[1024];  
15.             while((len=in.read(buf,0,1024))!=-1){  
16.                 outputStream.write(buf, 0, len);  
17.             }  
18.             outputStream.close();  
19.         } catch (IOException e) {  
20.             // TODO Auto-generated catch block  
21.             e.printStackTrace();  
22.         }  
23.         return "test";  
24.           
25.      }  

其中test.jsp便是我要显示图片的页面，原来我犯了很蠢的错误，应该让一个Controller来返回页面，另一个Controller来显示图片。终于这样我实现了从数据库中读取图片然后显示到页面上。下面来展示下我正确的代码流程：

 

 

 

（1）首先将图片上传然后存到数据库中，代码如下：

[java] view plain copy print?

1. @Controller  
2. @Configuration  
3. @ImportResource("classpath:spring.xml")  
4. @RequestMapping("/photo")  
5. public class FileUploadController {  
6.       
7.     @Resource  
8.     private IPhotoService photoService;  
9.     @RequestMapping(value="/tofile")  
10.    public String toFileUpLoad(HttpServletRequest request,Model model){  
11.        return "fileUpLoad";  
12.    }  
13.     //@Value("#{settings['picPath.picUrl']}")  
14.     @Value("${picUrl}")  
15.     private  String picUrl;  
16.       
17.     public void setPicUrl(String picUrl) {  
18.         this.picUrl = picUrl;  
19.     }  
20.     @RequestMapping("/addAction.do")  
21.     @ResponseBody//将返回结果写到response中  
22.     public String save(HttpServletRequest request,HttpServletResponse response,Model model,@RequestParam(value="photo",required=false)MultipartFile filedata) throws UnsupportedEncodingException{  
23.            
24.         if(filedata!=null&&!filedata.isEmpty()){  
25.             //获取图片的文件名  
26.             String fileName=filedata.getOriginalFilename();  
27.             //获取图片的扩展名  
28.             String extensionName=fileName.substring(fileName.lastIndexOf(".")+1);  
29.             //新的图片名=获取时间戳+"."图片扩展名  
30.             String newFileName=String.valueOf(System.currentTimeMillis())+"."+extensionName;  
31.             System.out.println(picUrl);  
32.             //将图片上传到服务器  
33.             //saveFile(newFileName,filedata);  
34.             saveFile(request,fileName,filedata);  
35.             //将图片名称保存至数据库  
36.             photoService.insert(fileName,filedata.getBytes());  
37.             //图片路径  
38.             String realPath=request.getSession().getServletContext().getRealPath(picUrl+"\\"+newFileName);  
39.             System.out.println("cddd:"+realPath);     
40.         }  
41.           
42.         JSONArray jsonArray=new JSONArray();  
43.         for(int i=3;i<4;i++){  
44.             Photo p=photoService.getPhotoById(new BigDecimal(i));  
45.             jsonArray.add(p);  
46.         }  
47.         return jsonArray.toString();  
48.     }  
49.     private void saveFile(HttpServletRequest request,String newFileName, MultipartFile filedata) {  
50.         //根据配置文件获取服务器图片存放路径  
51.         String saveFilePath=picUrl;  
52.         //构建文件目录  
53.         File tempFile=new File(saveFilePath);  
54.         if(!tempFile.exists()){  
55.             tempFile.mkdirs();  
56.         }  
57.         //保存文件到服务器  
58.             FileOutputStream fos;  
59.             try {  
60.                 fos = new FileOutputStream(saveFilePath+"\\"+newFileName);  
61.                 fos.write(filedata.getBytes());  
62.                 //fos.flush();  
63.                 fos.close();  
64.             } catch (Exception e) {  
65.                 // TODO Auto-generated catch block  
66.                 e.printStackTrace();  
67.             }  
68.         }  
69.       
70.     }  

图片上传的jsp页面代码如下：

 

[html] view plain copy print?

1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
2. pageEncoding="UTF-8"%>  
3.   
4.   
5.   
6.   
7.   
8.   
9.   
10.   
11.   
12.    
13.    
        
      
            照片:  
            
       
        
      
     
      
14.    
15.    
16.   
17.   

 

（2）将图片从数据库中读取出来，输出到页面上显示

 

      首先用一个Controller来返回显示图片的页面：

     

[java] view plain copy print?

1. //跳转到图片显示的页面  
2.      @RequestMapping(value="/toImageDisplay")  
3.      public String toImageDisplay(){  
4.          return "waterfullPic";  
5.      }  

 

我的waterfullPic.jsp页面如下：

 

[html] view plain copy print?

1.      
2.        
3.             
4.           
5.               
6.                   
7.