SpringMVC实现图片上传

最新推荐文章于 2022-10-10 13:39:33 发布

研发攻城狮

最新推荐文章于 2022-10-10 13:39:33 发布

阅读量582

点赞数

CC 4.0 BY-SA版权

分类专栏：开发笔记文章标签： springmvc 图片上传

本文链接：https://blog.youkuaiyun.com/pengchenghui/article/details/60324526

开发笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Tomcat服务器上配置图片虚拟目录，并通过Spring MVC实现图片上传功能。主要内容包括配置虚拟目录、设置文件解析器、实现图片上传逻辑及前端表单设置。

1上传图片

1.1 配置虚拟目录

在tomcat上配置图片虚拟目录，在tomcat下conf/server.xml中添加： <Context docBase="E:\temp" path="/pic" reloadable="false"/>

访问http://localhost:8080/pic即可访问E:\temp下的图片。

1.2 配置解析器

<beanid="multipartResolver"

class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

</property>

</bean>

1.2添加 jar包

CommonsMultipartResolver解析器依赖commons-fileupload和commons-io，加入如下jar包：

1.3 图片上传

controller部分代码编写

@RequestMapping("/editItemsSubmit") 
	public String  editItemsSubmit(Model model,Integer id, @Validated ItemsCustom itemsCustom,BindingResult bindingResult,
			MultipartFile items_pic//接收图片
			) throws Exception  {
 		
		System.out.println(id);
		
		List<ObjectError> allError=  bindingResult.getAllErrors();
		for (ObjectError objectError : allError) {
			System.out.println(objectError.getDefaultMessage());
		}
		model.addAttribute("allError", allError);
		
		//
		String originalFileName= items_pic.getOriginalFilename();
		if (items_pic!=null && originalFileName!=null && originalFileName.length()>0) {
			String pic_path="E:\\temp\\";
			String newFileName = UUID.randomUUID()+originalFileName.substring(originalFileName.lastIndexOf("."));
			File newFile  = new File(pic_path+ newFileName);
			items_pic.transferTo(newFile);//存入磁盘
			
			itemsCustom.setPic(newFileName); 		//新图片写到itemsCustom中			
		}
		itemsService.updateItems(id, itemsCustom);
		//return "success";
		//return "items/editItems";	
		//return "forward:queryItems.action";
		//return "redirect:queryItems.action";
		return "redirect:queryItems.action";
	}

1.4页面部分设置

form添加enctype="multipart/form-data"：

<form id="itemForm" action="${pageContext.request.contextPath}/items/editItemsSubmit.action" method="post"
   	 	enctype="multipart/form-data">   
   	 			<!--  enctype="multipart/form-data" post 二进制信息  -->
   	 			<input type="hidden" name="pic" value="${itemsCustom.pic}">
   			<input type="hidden" name="id" value="${itemsCustom.id}">
   			修改商品信息：
   			<table width="100%" border="1"> 
   				<tr>
   					<td>商品名称</td> 
   					<td><input type="text"  name="name" value="${itemsCustom.name}"/></td>
   				</tr>
   				<tr>
   					<td>商品价格</td>
   					 <td><input type="text"  name="price" value="${itemsCustom.price}"/></td>
   				</tr>
   				<tr>
   					<td>生产日期</td> 
   					<td><input type="text"  name="createtime" value="<fmt:formatDate value="${itemsCustom.createtime}" pattern="yyyy-MM-dd HH-mm-ss"/>"/>
   					</td>
   				</tr>
  			    <tr> 				
				 <td>商品图片</td>
					<td>
						<c:if test="${itemsCustom.pic !=null}">
						<img src="/pic/${itemsCustom.pic}" width=100 height=100/>
						<br/>
						</c:if>
						<input type="file"  name="items_pic"/> 
						<!-- 上传图片控件 -->
					</td>
			     </tr>	 

   				<tr>
					<td>商品简介</td>
					<td>
						<textarea rows="3" cols="30" name="detail">${itemsCustom.detail }</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="submit" value="提交"/>
					</td>
				</tr>
   			</table>
   		</form>

file的name与controller形参一致：

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