小白如何使用 Spring MVC 文件上传？_xml

Spring MVC 架构使用“FrontController”设计模式，这是任何 MVC 设计实现的基础。DispatcherServlet 是此设计的核心，除了提供对上传文件的支持之外，HTTP 请求还委托给控制器，视图解析为底层视图技术。与任何常规 servlet 一样，DispatcherServlet 可以与自定义处理程序映射一起配置。

注意： Spring MVC是先决条件

Spring MVC 框架提供了对CommonsMultipartResolver的支持，用于为基于 Web 的应用程序上传任何类型的文件。在这里，我们将创建一个 Spring MVC Web 应用程序并配置MultipartResolver来上传文件（图像）并在 Web 上显示它们。

执行：


提示：我们在这个项目中使用了 Eclipse ide。

创建Spring MVC文件上传项目的步骤


步骤1：

我们需要创建一个maven webapp项目。现在，单击“创建Maven项目”并添加 maven webapp 原型作为基础包。输入项目的组 ID 和工件 ID，然后单击完成。 

项目结构看起来像这样：

小白如何使用 Spring MVC 文件上传？_xml_02

步骤2：

我们首先在创建maven项目后创建的pom.xml中添加一些依赖项。pom.xml 定义了 maven 必须为您获取和管理的所有依赖项。commons -fileupload和commons-io是 MultipartResolver 的重要依赖项。根据此添加所有依赖项：

依赖文件：pom.xml

<?xml version="1.0" encoding="UTF-8"?> 

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> 
<modelVersion>4.0.0</modelVersion> 

<groupId>com.gfg</groupId> 
<artifactId>SpringMVCFileUpload</artifactId> 
<version>0.0.1-SNAPSHOT</version> 
<packaging>war</packaging> 

<name>SpringMVCFileUpload Maven Webapp</name> 
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url> 

<properties> 
	<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> 
	<maven.compiler.source>1.7</maven.compiler.source> 
	<maven.compiler.target>1.7</maven.compiler.target> 
</properties> 

<dependencies> 
	<dependency> 
	<groupId>junit</groupId> 
	<artifactId>junit</artifactId> 
	<version>4.11</version> 
	<scope>test</scope> 
	</dependency> 

<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
<dependency> 
	<groupId>org.springframework</groupId> 
	<artifactId>spring-webmvc</artifactId> 
	<version>5.1.1.RELEASE</version> 
</dependency> 
<!-- https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-jasper -->
<dependency> 
	<groupId>org.apache.tomcat</groupId> 
	<artifactId>tomcat-jasper</artifactId> 
	<version>9.0.12</version> 
</dependency> 
	
	<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>	 
	<groupId>javax.servlet</groupId>	 
	<artifactId>servlet-api</artifactId>	 
	<version>3.0-alpha-1</version>	 
</dependency> 
	
<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency> 
	<groupId>javax.servlet</groupId> 
	<artifactId>jstl</artifactId> 
	<version>1.2</version> 
</dependency> 
	
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency> 
	<groupId>commons-fileupload</groupId> 
	<artifactId>commons-fileupload</artifactId> 
	<version>1.4</version> 
</dependency> 
	
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency> 
	<groupId>commons-io</groupId> 
	<artifactId>commons-io</artifactId> 
	<version>2.11.0</version> 
</dependency> 


</dependencies> 

<build> 
	<finalName>SpringMVCFileUpload</finalName> 
	<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
	<plugins> 
		<plugin> 
		<artifactId>maven-clean-plugin</artifactId> 
		<version>3.1.0</version> 
		</plugin> 
		
		<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
		<plugin> 
		<artifactId>maven-resources-plugin</artifactId> 
		<version>3.0.2</version> 
		</plugin> 
		<plugin> 
		<artifactId>maven-compiler-plugin</artifactId> 
		<version>3.8.0</version> 
		</plugin> 
		<plugin> 
		<artifactId>maven-surefire-plugin</artifactId> 
		<version>2.22.1</version> 
		</plugin> 
		<plugin> 
		<artifactId>maven-war-plugin</artifactId> 
		<version>3.2.2</version> 
		</plugin> 
		<plugin> 
		<artifactId>maven-install-plugin</artifactId> 
		<version>2.5.2</version> 
		</plugin> 
		<plugin> 
		<artifactId>maven-deploy-plugin</artifactId> 
		<version>2.8.2</version> 
		</plugin> 
	</plugins> 
	</pluginManagement> 
</build> 
</project>

步骤 3：

WEB-INF文件夹中的web.xml文件定义了与不同 URL 和 servlet 的映射，以处理对这些 URL 的请求。在此配置文件中，我们使用了应用程序启动监听器、配置了 servlet，并添加了 servlet-mapping 来映射 URL。

配置文件：web.xml

<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	version="3.0"> 

	<display-name>To do List</display-name> 

	<welcome-file-list> 
		<welcome-file>login.do</welcome-file> 
	</welcome-file-list> 
	
	<servlet> 
		<servlet-name>gfg</servlet-name> 
		<servlet-class> 
			org.springframework.web.servlet.DispatcherServlet 
		</servlet-class> 
		<init-param> 
			<param-name>contextConfigLocation</param-name> 
			<param-value>/WEB-INF/gfg-servlet.xml</param-value> 
		</init-param> 
		<load-on-startup>1</load-on-startup> 
	</servlet> 

	<servlet-mapping> 
		<servlet-name>gfg</servlet-name> 
		<url-pattern>/</url-pattern> 
	</servlet-mapping> 
</web-app>

文件：gfg-servlet.xml

这是位于“ /src/main/webapp/WEB-INF/gfg.servlet.xml ”中的 gfg-servlet.xml 文件。该文件处理 Web 应用程序的所有 HTTP 请求。注解驱动启用了spring @Controller功能，资源映射有助于处理所有资源的HTTP请求。bean 配置有助于识别和扫描位于视图文件夹中的 jsp。组件扫描根据提到的注释来定位和分配bean。还添加了资源映射，将所有资源映射到查看某个页面。

步骤 4：

id 为multipartResolver 的bean将有助于实例化CommonsMultipartResolver。

<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd 
	http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd 
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> 

	<context:component-scan base-package="com.gfg" /> 
	
	<mvc:resources mapping="/resources/**" location="/WEB-INF/resources/" cache-period="31556926"/> 
	
	<mvc:annotation-driven /> 
	
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver"
		name="viewResolver"> 
		<property name="prefix"> 
			<value>/WEB-INF/views/</value> 
		</property> 
		<property name="suffix"> 
			<value>.jsp</value> 
		</property> 
	</bean> 
	
	<bean id="multipartResolver"
	class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/> 
</beans>

步骤5：

com.gfg.controller中的UploadFileController类有用于映射两个请求的方法。upload 方法是一个 get 映射和简单的重定向到fileform.jsp视图页面。fileUpload方法发送Post请求并重定向showupload页面。该类有三个参数CommonsMultipartFile获取上传的文件。文件被转换为字节数组并使用FileOutputStream保存到文件中，模型参数用于将文件名作为属性添加到 showupload.jsp 文件中。

例子:
package com.gfg.controller; 

// Importing required classes 
import java.io.File; 
import java.io.FileOutputStream; 
import javax.servlet.http.HttpSession; 
import org.springframework.stereotype.Controller; 
import org.springframework.ui.Model; 
import org.springframework.web.bind.annotation.GetMapping; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.RequestParam; 
import org.springframework.web.multipart.commons.CommonsMultipartFile; 

// Annotation 
@Controller
// Class 
public class UploadFileController { 

	@GetMapping("/upload") public String upload() 
	{ 
		return "fileform"; 
	} 

	@RequestMapping(value = "/uploadfile", 
					method = RequestMethod.POST) 
	public String 
	fileUpload(@RequestParam("thisfile") 
			CommonsMultipartFile file, HttpSession s, 
			Model mod) 
	{ 

		// 获取文件的字节并
		// 将其存储在字节数组中
    byte[] data = file.getBytes(); 

		String filePath 
			= s.getServletContext().getRealPath("/") 
			+ "WEB-INF" + File.separator + "resources"
			+ File.separator + "image" + File.separator 
			+ file.getOriginalFilename(); 

		// 尝试块以检查异常
		try { 

		// 创建一个 FileOutputStream 类的对象
			FileOutputStream fileout 
				= new FileOutputStream(filePath); 
			fileout.write(data); 
		// 关闭文件连接
		// 使用 close() 方法
			fileout.close(); 
			mod.addAttribute("imgName", 
							file.getOriginalFilename()); 
		} 

	// 用于处理异常的捕获块
		catch (Exception e) { 

			// 使用printStackTrace()方法显示异常及行号
			e.printStackTrace(); 
		} 

		return "showupload"; 
	} 
}

步骤6：

views文件夹中的fileform.jsp定义上传表单，enctype为multipart / form-data。我们使用 bootstrap 来设置页面的正确样式。

例子:
<!doctype html> 
<html lang="en"> 
<head> 
	<!-- Required meta tags -->
	<meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 

	<title>File uploader</title> 
</head> 
<body> 
	<h1>Upload File</h1> 
	<form action="uploadfile" method="post" enctype="multipart/form-data"> 
		<div class="form-group"> 
		<label for="formFile" class="form-label">Upload Your file</label> 
		<input name="thisfile" class="form-control" type="file" id="formFile"> 
		</div> 
		<button class="btn btn-secondary">Upload</button> 
	</form> 

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
</body> 
</html>

showupload.jsp页面使用jsp映射图片url来显示上传的图片。

<%@ page language="java" contentType="text/html; charset=UTF-8" 
	pageEncoding="UTF-8"%> 
<%@ taglib prefix="c" url="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
</head> 
<body> 

	<h1>File Uploaded</h1> 

	<img src="<c:url value="resources/image/${imgName}"/>"/> 
</body> 
</html>

添加所有类和配置文件后，项目结构应如下所示：

小白如何使用 Spring MVC 文件上传？_html_03

第7步：

现在是时候运行您的项目了，启动Tomcat服务器并运行您的应用程序，现在在任何浏览器中输入“http://localhost:8080/SpringMVCFileUpload/upload”。

输出：

小白如何使用 Spring MVC 文件上传？_html_04

上传图像并单击上传，这会将您重定向到显示上传页面，您将看到上传的图像。

小白如何使用 Spring MVC 文件上传？_xml_05

因此，我们创建了一个带有上传表单的 Spring MVC Web 应用程序，并将上传的图像显示在 Web 上。