【springmvc】——上传图片

    在页面实现添加上传商品图片功能。

    springmvc中对多部件类型解析

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

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

    同时，需要将解析器enctype="multipart/form-data"配置到需要解析的界面

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

    添加上传图片的jar包

    上边的解析内容部使用下面的jar包进行图片上传：

    

    创建图片虚拟目录存储图片    

    两种配置方法

    1、通过图形界面配置

    打开项目，双击tomcat服务，选择Modules，在Web Modules界面中，打开Add External Web Modile... ，弹出Add Web Module窗口，通过Browse...选择图片存放的虚拟目录对应的本地目录，在Path中填写图片存放的子目录。如下图过程：

    2、直接修改tomcat的配置

    打开tomcat本地文件，在conf文件下有server.xml文件，添加虚拟目录：

<Context docBase="G:\springmvc\picture" path="/pic" reloadable="false"/>

    添加结果

    添加完成后，查看是否可用

    启动项目，访问地址：http://localhost:8080/pic/图片名称，例如：http://localhost:8080/pic/SelfieCity_20160922132017_save.jpg，访问结果如下：

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

    上传图片代码

    jsp页面

<tr>
	<td>商品图片</td>
	<td>
		<c:if test="${items.pic !=null}">
			<img src="/pic/${items.pic}" width=100 height=100/>
			<br/>
		</c:if>
		<input type="file"  name="items_pic"/> 
	</td>
</tr>

    controller方法

    注意以下红框中内容：

    

		@RequestMapping("/editItemsSubmit")
		public String editItemsSubmit(Model model,
				HttpServletRequest request,Integer id,
				@ModelAttribute("items") @Validated(value={ValidGroup1.class}) ItemsCustom itemsCustom,
				BindingResult bindingResult,
				MultipartFile items_pic   //接收商品图片
				)throws Exception {
			// 获取校验错误信息
			if (bindingResult.hasErrors()) {
				// 输出错误信息
				List<ObjectError> allErrors = bindingResult.getAllErrors();

				for (ObjectError objectError : allErrors) {
					// 输出错误信息
					System.out.println(objectError.getDefaultMessage());
				}
				// 将错误信息传到页面
				model.addAttribute("allErrors", allErrors);
				
				//可以直接使用model将提交pojo回显到页面
				model.addAttribute("items", itemsCustom);
				
				// 出错重新到商品修改页面
				return "items/editItems";
			}

			//原始名称
			String originalFilename = items_pic.getOriginalFilename();
			//上传图片
			if(items_pic != null && originalFilename!=null && originalFilename.length()>0){
				//存储图片的物力路径
				String pic_path="G:\\springmvc\\picture\\";
				
				//新的图片名称
				String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));
				//新图片
				File newFile = new File(pic_path+newFileName);
				
				//将内存中的数据写入磁盘
				items_pic.transferTo(newFile);
				
				//将新图片名称写到itemsCustom中
				itemsCustom.setPic(newFileName);
			}
			
			//调用service更新商品信息，页面需要将商品信息传到此方法
			itemsService.updateItems(id, itemsCustom);
			return "success";
		}

    测试

    通过以上步骤，图片上传的内容已经完善，使用修改功能对上传图片进行测试

    进入如下页面，选择本地图片，提交：

    经过代码调试，查看上传图片是否存在。

    最后，查看图片上传是否成功：

    一：查看图片的虚拟目录中是否已经存在刚刚上传的图片；

    二：查看数据库表中picture字段是否为刚上传图片文件名。

    小编执行成功，并测试完成。