SpringMVC图片文件上传功能实现

 

SpringMVC图片文件上传功能实现

1. 在工程依赖库下添加文件上传jar包

commons-fileupload-1.2.2.jar

commons-io-2.4.jar

2.jsp页面设置form表单属性enctype

在表单中上传图片时，需要在form的属性设置中添加enctype="multipart/form-data"。

[html]  view plain  copy

1. <form id="itemForm" action="${pageContext.request.contextPath }/items/editItemsSubmit.action" method="post" enctype="multipart/form-data" >  

表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据，进行下面的操作. enctype="multipart/form-data"是上传二进制数据;form里面的input的值以2进制的方式传过去。

页面上如果要添加多个图片应设置：

javaScript 添加文件函数：

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	function addImg() {
		$("#addimg").after('<input type="file" name="proImg" id="proImg" />');
	}
</script>

然后在控制器上进行修改 把文件属性变成数组

<img src="https://img-blog.csdnimg.cn/2022010700504186556.png" alt="" />

3. springMVC.xml添加multipart类型解析器

在页面form中提交enctype="multipart/form-data"的数据时，需要springmvc对multipart类型的数据进行解析，需要在springmvc.xml中配置multipart类型解析器。

[html]  view plain  copy

1. <!-- 文件上传 -->  
2. <bean id="multipartResolver"  
3.     class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
4.     <!-- 设置上传文件的最大尺寸为5MB -->  
5.     <property name="maxUploadSize">  
6.         <value>5242880</value>  
7.     </property>  
8. </bean>  

4.创建图片虚拟目录，以存放图片

eclipse IDE 通过界面进行配置：servers -->Tomcat v8.0 Server at localhost--> 双击，选择-->add external web modules.

在图片虚拟目录中，一定将图片目录分级创建（提高i/o性能），一般我们采用按日期(年、月、日)进行分级创建。

5. jsp 页面，设置图片显示的位置和大小。

[html]  view plain  copy

1. <tr>  
2. <td>商品图片</td>  
3. <td>  
4.     <c:if test="${itemsCustom.pic !=null}">  
5.         <img src="/pic/${itemsCustom.pic}" width=100 height=100/>  
6.         <br/>  
7.     </c:if>  
8.     <input type="file"  name="items_pic"/>   
9. </td>  
10. lt;/tr>   

6. Controller 类方法中写相应的方法

<1, 方法的参数中添加MultipartFile items_pic行参  这个跟页面的图片的参数名字是一致的；

<2, 为了避免文件名称相同而冲突，使用UUID.randomUUID()产生一个随机的数值作为名称；

<3. 将图片数据写入磁盘：items_pic.transferTo(newFile);

<4. 更新itemsCustom中属性pic的值itemsCustom.setPic(newFileName);

[java]  view plain  copy

1.     //在需要校验的poJo类前加 @Validated, 后面加BindingResult bindingResult 存放出错信息。  
2.     @RequestMapping("/editItemsSubmit")  
3.     public String editItemsSubmit(Model model,   
4.             HttpServletRequest request,Integer id,  
5.             @Validated ItemsCustom itemsCustom,   
6.             BindingResult bindingResult,  
7.             MultipartFile items_pic)throws Exception {  
8.           
9.         if(bindingResult.hasErrors()){  
10.             List<ObjectError> allErrors = bindingResult.getAllErrors();  
11.             for(ObjectError objectError :allErrors){  
12.                 System.out.println(objectError.getDefaultMessage());  
13.             }  
14.               
15.             model.addAttribute("allErrors", allErrors);  
16.             model.addAttribute("itemsCustom", itemsCustom);  
17.             return "items/editItems";  
18.         }         
19.           
20.         //原始名称  
21.         String originalFilename = items_pic.getOriginalFilename();  
22.         //上传图片  
23.         if(items_pic!=null && originalFilename!=null && originalFilename.length()>0){          
24.         //存储图片的物理路径  
25.         String pic_path = "C:\\Users\\Administrator.MICROSO-U8JSS8B\\Desktop\\java_code\\picture\\";  
26.         //新的图片名称  
27.         String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));  
28.         //新图片  
29.         File newFile = new File(pic_path+newFileName);  
30.         //将内存中的数据写入磁盘  
31.         items_pic.transferTo(newFile);    
32.         //将新图片名称写到itemsCustom中  
33.         itemsCustom.setPic(newFileName);  
34.               
35.         }  
36.         itemsService.updateItems(id, itemsCustom);  
37.            
38. //      return "success";  
39.         return "forward:queryItems.action";  
40.     }  

7.测试效果

中间出现错误

org.springframework.beans.BeanInstantiationException: Could not instantiate bean class [org.springframework.web.multipart.MultipartFile]: Specified class is an interface

    org.springframework.beans.BeanUtils.instantiateClass(BeanUtils.java:101)

    org.springframework.web.bind.annotation.support.HandlerMethodInvoker.resolveModelAttribute(HandlerMethodInvoker.java:762)

    org.springframework.web.bind.annotation.support.HandlerMethodInvoker.resolveHandlerArguments(HandlerMethodInvoker.java:356)

    org.springframework.web.bind.annotation.support.HandlerMethodInvoker.invokeHandlerMethod(HandlerMethodInvoker.java:171)

    org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter.invokeHandlerMethod(AnnotationMethodHandlerAdapter.java:426)

    org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter.handle(AnnotationMethodHandlerAdapter.java:414)

    org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:790)

    org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:719)

    org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:644)

    org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:560)

    javax.servlet.http.HttpServlet.service(HttpServlet.java:646)

    javax.servlet.http.HttpServlet.service(HttpServlet.java:727)

    org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)

    org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:88)

    org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:76)

    org.springframework.orm.hibernate3.support.OpenSessionInViewFilter.doFilterInternal(OpenSessionInViewFilter.java:198)

    org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:76)

解决方案：

解决方案：在Controller的MultipartFile参数前面加上@RequestParam就解决了！