SpringMvc学习5之图片上传

最新推荐文章于 2024-05-09 14:18:14 发布

五毛辣条

最新推荐文章于 2024-05-09 14:18:14 发布

阅读量274

点赞数

分类专栏： SpringMvc Spring MyBatis 文章标签： mvc java spring

本文链接：https://blog.csdn.net/qq_43332008/article/details/120521146

版权

Spring 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

MyBatis

21 篇文章 0 订阅

订阅专栏

SpringMvc

8 篇文章 0 订阅

订阅专栏

问题引入

在这里我们继续使用之前的案例，因为要做图片上传，所以我们还是需要做editItem.jsp页面的修改。我们需要从itemList.jsp向我们的编辑页面editItem.jsp进行跳转。所以我们需要大致需要两步，第一步先分析itemList.jsp页面，然后将数据发送到后端进行数据的一些处理，在将数据返回到editItem.jsp。第二步数据返回到前端页面editItem.jsp后，在editItem.jsp对数据进行显示。

第一步：itemList.jsp页面分析

在这里插入图片描述
通过超连接我们可以看到当点击修改的时候，会跳转到items/itemEdit/${item.id}连接处，所以我们在后台ItemsController.java中使用注解@RequestMapping("/itemEdit/{id}")，这里没有注解@RequestMapping("/items")是因为在该类上面已经对items进行了注解，运行的时候先通过类上面的注解items，在去类中寻找注解有/itemEdit/{id}的方法。

    //@PathVariable("id"),itemList.jsp中<td><a href="${pageContext.request.contextPath }/items/itemEdit/${item.id}">修改</a></td>
    //传递到这里需要将该为 @RequestMapping("/itemEdit/{id}")
    //然后添加注解 @RequestMapping("/itemEdit/{id}")
    @RequestMapping("/itemEdit/{id}")
    public String  itemEdit(@PathVariable("id") Integer id ,HttpServletRequest request, Model model){
       Items items=itemService.findItemByID(Integer.valueOf(id));
       model.addAttribute("item",items);  //把items给editItem.jsp的item

       return "editItem";

   }

这里返回的是一个string类型的值，方法的参数中定义里整型的id,其中对id使用类@PathVariable(“id”)，意思就是将传递多来的参数@RequestMapping("/itemEdit/{id}")中的id赋值给我们这里的入口参数整型id,然后入口参数还需要HttpServletRequest类中的request,以及Model。
接下来我们在ItemService接口类并且在实现类中定义了findItemByID()方法如下：方法内调用itemsMapper接口下的selectByPrimaryKey(id)，也就是通过id查询返回一个条信息。

 public Items findItemByID(Integer id) {
        Items items = itemsMapper.selectByPrimaryKey(id);
        return items;
    }

service的查询方法定义完后，在ItemsController中的itemEdit()方法中被调用并用变量items去接收这个值，然后我们将返回的数据通过使用 model.addAttribute(“item”,items)将items以别名item存储到model中，最后使用 return "editItem"返回给editItem.jsp页面。

第二步：上一步我们已经通过后端把数据传送到editItem.jsp页面，接下来我们看editItem.jsp页面内容。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改商品信息</title>
<%--
做上传表单的要求
1.放在表单里面
2.post提交
3.表单的属性enctype="multipart/form-data"
4.使用标签<input type="file"  name="pictureFile"/>
5.在静态项目文件中，创建一个pic虚拟路径
6.在配置中点击development选择添加扩展包
--%>
</head>
<body> 
	<!-- 上传图片是需要指定属性 enctype="multipart/form-data" -->
	<form id="itemForm" action="${pageContext.request.contextPath }/items/updateitem" 
	method="post" enctype="multipart/form-data">
<%-- 	<form id="itemForm"	action="${pageContext.request.contextPath }/items/updateitem.action" method="post"> --%>
		<input type="hidden" name="id" value="${item.id }" /> 修改商品信息：
		<table width="100%" border=1>
			<tr>
				<td>商品名称</td>
				<td><input type="text" name="name" value="${item.name }" /></td>
			</tr>
			<tr>
				<td>商品价格</td>
				<td><input type="text" name="price" value="${item.price }" /></td>
			</tr>
			
			<tr>
				<td>商品生产日期</td>
				<td><input type="text" name="createtime"
					value="<fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/>" /></td>
			</tr>
			
			<tr>
				<td>商品图片</td>
				<td>
					<c:if test="${item.pic !=null}">
						<img src="/pic/${item.pic}" width=100 height=100/>
						<br/>
					</c:if>
					<input type="file"  name="pictureFile"/> 
				</td>
			</tr>
			 
			<tr>
				<td>商品简介</td>
				<td><textarea rows="3" cols="30" name="detail">${item.detail }</textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="submit" value="提交" />
				</td>
			</tr>
		</table>

	</form>
</body>

</html>

1.上面的页面我们重点看页面图片上传的部分：

在这里插入图片描述

如上图所示，我们在提交表单后，需要在中指定图片的属性所以需要加上enctype=“multipart/form-data”。在表单先点击按钮，然后对上传部分使用了判断语句，在判断图片这里的内容是否为空，不为空，就指定文件的上传地址这里的地址为/pic/${item.pic}

上面有一个上传地址为/pic/${item.pic}，所以我们也要在项目文件中创建一个对应的文件夹用来存取图片
然后再idea中配置的位置点击加号然后点击External Source…
点击项目文件下创建的pic，然后点击下一步。
配置成功页面如图所示

2.当我们点击提交页面后我们将使用中的action返回到后台含有/items/updateitem注解的地方

updateitem注解的方法为

//    MultipartFile pictureFile做文件上传必须使用这个方法
    @RequestMapping("/updateitem")
    public String update(MultipartFile pictureFile,Items items) throws Exception{
       String filename = pictureFile.getOriginalFilename();
       //生成不会重复的名字
       String newFilename=UUID.randomUUID().toString()+filename.substring(filename.lastIndexOf("."));
       pictureFile.transferTo(new File("C:\\Users\\YJ\\IdeaProjects\\springMvc_day2\\src\\main\\webapp\\pic\\"+newFilename));
       items.setPic(newFilename);
       itemService.update(items);
       return "success";
   }

如上面代码所示，文件上传的部分，需要接收的参数有MultipartFile，Items类型的变量。方法内，先获取上传文件的原始文件名。
StringnewFilename=UUID.randomUUID().toString()+filename.substring(filename.lastIndexOf("."));的内容是生成不会重复的新名字，并且将原来名字.jpg/.png之类后缀前面的部分代替掉。
然后需要使用pictureFile.transferTo将pic表转换成文件
然后使用items的setPic()方法将新名字传递进去保存到items对象中，然后使用servicec层的itemService的update方法存储。最终使用return "success"返回到sucess.jsp页面。

第三步：上面的步骤就是做图片或者文件上传的步骤，接下来就是要做上传文件操作的重要配置。以及文件上传需要的jar包

1.由于我们要做上传操作，所以我们需要再springmvc中告诉它，我们要做上传，所以需要对springmvc进行以下配置：

 <!--上传文件配置-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="500000"/>
    </bean>

<property name="maxUploadSize" value="500000"/>指定文件上传大小5M

2.文件上传需要的jar包

		<!--文件上传的包-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.5</version>
        </dependency>

源码地址：https://gitee.com/yangforever/project-learning/tree/master/demo/SpringMvc/springmvcday3

五毛辣条

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringMvc学习5之图片上传

问题引入在这里我们继续使用之前的案例，因为要做图片上传，所以我们还是需要做editItem.jsp页面的修改。我们需要从itemList.jsp向我们的编辑页面editItem.jsp进行跳转。所以我们需要大致需要两步，第一步先分析itemList.jsp页面，然后将数据发送到后端进行数据的一些处理，在将数据返回到editItem.jsp。第二步数据返回到前端页面editItem.jsp后，在editItem.jsp对数据进行显示。第一步：itemList.jsp页面分析通过超连接我们可以看到当点击
复制链接

扫一扫