SpringMVC框架|商品图片上传


需求分析

很多时候需要上传图片,那么图片该如何存储呢?应该将图片的路径存储到数据库图片本身应该通过IO流写到磁盘上或服务器上,本次演示存储在服务器上,但是在真正的企业开发中,都是会有一个单独的服务器专门用来存储图片。

关于图片的上传要做下面几点:

  • 编写商品添加页面.jsp
  • 编写handler处理器
  • 导文件上传需要的jar包
  • 在SpringMVC的配置文件中添加上传解析器

1.商品添加页面

简单书写一个商品添加页面,点击添加商品后跳转到处理器的"/product/upload.do"路径中。

在这里插入图片描述

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE 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>
  </head>
  
  <body>
  	<form action='<c:url value="/product/upload.do"/>' method="post" enctype="multipart/form-data">
  		商品名称:<input type="text" name="name"/><br/>
  		上传图片:<input type="file" name="uploadFile"><br/>
  		<input type="submit" value="添加商品"/>
  	</form>  
  </body>
</html>

2.handler处理器

当请求转发到handler处理器,增强方法后再转发到index.jsp页面。

package com.gql.upload;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import com.gql.pojo.Product;

@Controller
@RequestMapping("/product")//此处是为了提升安全性
public class ProductController {
	
	@RequestMapping("/upload")
	public String upload(HttpServletRequest request,Product product,@RequestParam("uploadFile") MultipartFile file) throws IllegalStateException, IOException{
		//获取要上传的文件名
		String fileName = file.getOriginalFilename();
		//获取文件要上传到的项目路径
		String realPath = request.getServletContext().getRealPath("/img");
		//将文件名标记唯一
		String newPath = new Date().getTime() + fileName;
		File dest = new File(realPath+ "/" +newPath);
		file.transferTo(dest);
		//存储最终路径到pojo,为存入数据库做准备
		product.setPic("/img/" + newPath);
		//存入最终路径到request作用域
		request.setAttribute("product", product);
		return "index";
	}
}

3.最终跳转到的页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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>Insert title here</title>
  </head>
  
  <body>
    	图片添加成功!
    	<img alt="" src="${pageContext.request.contextPath}/${product.pic}">
  </body>
</html>

4.SpringMVC配置

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="
		http://www.springframework.org/schema/beans 
		http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context
		http://www.springframework.org/schema/context/spring-context.xsd
		http://www.springframework.org/schema/aop
		http://www.springframework.org/schema/aop/spring-aop.xsd 
		http://www.springframework.org/schema/tx
		http://www.springframework.org/schema/tx/spring-tx.xsd
		http://www.springframework.org/schema/mvc
		http://www.springframework.org/schema/mvc/spring-mvc.xsd ">
	
	<!-- 处理器(手写) -->
	<context:component-scan base-package="com.gql.upload"></context:component-scan>
	
	<!-- 代替处理器映射器和处理器适配器 -->
	<mvc:annotation-driven/>

	<!-- 视图解析器 -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/product/"></property>
		<property name="suffix" value=".jsp"></property>
	</bean>
	
	
	<!-- 文件上传解析器 -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- maxUploadSize:文件上传最大字节 524880=5兆-->
		<property name="maxUploadSize" value="5242880"></property>
		<!--maxInMemorySize:如果小于8兆存入内存,大于8兆存入磁盘 -->
		<!--  <property name="maxInMemorySize" value="8388608‬"></property>-->
		<!-- 默认编码集 -->
		<property name="defaultEncoding" value="utf-8"></property>
	</bean>
</beans>

5.产品的pojo

package com.gql.pojo;
/**
 * 类说明:
 *		Product_pojo
 * @guoqianliang1998.
 */
public class Product {
	private Integer id;
	private String name;
	private String pic;
	//省略set和get方法

6.前端控制器

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>SpringMVC01</display-name>
	<!-- 解决dopost请求乱码问题 -->
	<filter>     
	  	<filter-name>encodingFilter</filter-name> 
	  	<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
	  	<init-param>
	  		<param-name>encoding</param-name>
	  		<param-value>UTF-8</param-value>
	  	</init-param>                
     	<init-param>
     		<!--如果已经指定了字符集是否还使用SpringMVC指定的字符集  -->
	  		<param-name>forceEncoding</param-name>
	  		<param-value>true</param-value>
	  	</init-param>   
  	</filter>        
  	<filter-mapping>                
  		<filter-name>encodingFilter</filter-name> 
  		<url-pattern>/*</url-pattern>       
  	</filter-mapping>
	
	<!-- 前端控制器 -->
	<servlet>
		<servlet-name>springmvc</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<!-- 加载SpringMVC配置文件 -->
		<init-param>
				<param-name>contextConfigLocation</param-name>
				<param-value>classpath:springmvc_upload.xml</param-value>
		</init-param>
	</servlet>

	<servlet-mapping>
		<servlet-name>springmvc</servlet-name>
		<!-- 
			*.do,*.action : 请求的url以.do或.action结尾,都会被SpringMVC框架所解析.
			/ : 所有的请求都会被pringmvc所解析,会造成静态资源无法访问.支持RestFul开发风格.
			/* : 拦截所有请求,JSP也会被springmvc解析,造成JSP无法访问.不要使用这种方式	
		-->
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>
</web-app>

7.项目结构与jar包

在这里插入图片描述

在这里插入图片描述

8.测试商品图片上传

在测试页面选择图片进行上传
在这里插入图片描述
图片添加成功!
在这里插入图片描述
成功在服务器的img文件夹下添加了图片。

在这里插入图片描述

发布了422 篇原创文章 · 获赞 1112 · 访问量 24万+

猜你喜欢

转载自blog.csdn.net/weixin_43691058/article/details/104379909