La arquitectura Spring MVC utiliza el patrón de diseño «FrontController», que es fundamental para cualquier implementación de diseño MVC. El DispatcherServlet está en el corazón de este diseño mediante el cual las requests HTTP se delegan al controlador, las vistas se resuelven en la tecnología de vista subyacente, además de brindar soporte para cargar archivos. DispatcherServlet, como cualquier servlet normal, se puede configurar junto con asignaciones de controladores personalizadas.
Nota: Spring MVC actúa como un requisito previo
El marco Spring MVC brinda soporte para CommonsMultipartResolver para cargar cualquier tipo de archivo para una aplicación basada en la web. Aquí crearemos una aplicación web Spring MVC y configuraremos MultipartResolver para cargar archivos (imagen) y también mostrarlos en la web.
Implementación:
Sugerencia : hemos utilizado Eclipse ide para este proyecto.
Pasos para crear un proyecto de carga de archivos Spring MVC
Paso 1: Necesitamos crear un proyecto de aplicación web maven. Ahora, haga clic en crear un proyecto Maven y agregue el arquetipo de aplicación web maven como paquete base. Ingrese la identificación del grupo y la identificación del artefacto para su proyecto y haga clic en finalizar.
La estructura del proyecto sería algo así:
Paso 2: comencemos agregando algunas dependencias en el pom.xml ya creado después de crear un proyecto maven. El pom.xml define todas las dependencias que Maven tiene que obtener y administrar por usted. Commons-fileupload y commons-io son las dependencias importantes para MultipartResolver. Agrega todas las dependencias de acuerdo a esto:
Archivo de dependencia: pom.xml
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>
Paso 3: el archivo web.xml en la carpeta WEB-INF define la asignación con diferentes URL y servlets para manejar las requests de esas URL. En este archivo de configuración, usamos el detector para el inicio de la aplicación, configuramos el servlet y agregamos un servlet-mapping para mapear la URL.
Archivo de configuración: web.xml
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>
Archivo: gfg-servlet.xml
Este es el archivo gfg-servlet.xml ubicado en “ /src/main/webapp/WEB-INF/gfg.servlet.xml “. Este archivo maneja todas las requests HTTP para aplicaciones web. La función impulsada por anotaciones habilita la función Spring @Controller, el mapeo de recursos ayuda a manejar las requests HTTP para todos los recursos. La configuración del bean ayuda a identificar y escanear el jsp ubicado en la carpeta de vistas. El análisis de componentes localiza y asigna beans de acuerdo con la anotación mencionada. También se agregó una asignación de recursos para asignar todos los recursos a la vista de una página.
Paso 4: Un bean con id como multipartResolver ayudará a crear instancias de CommonsMultipartResolver .
XML
<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>
Paso 7: la clase UploadFileController en com.gfg.controller tiene métodos para asignar dos requests. El método de carga es un mapeo de obtención y redireccionamientos simples a la página de visualización de fileform.jsp . El método fileUpload envía una solicitud de publicación y redirige la página showupload. Esta clase tiene tres parámetros CommonsMultipartFile obtiene el archivo cargado. El archivo se convierte en una array de bytes y se guarda en un archivo usando FileOutputStream , el parámetro del modelo se usa para agregar el nombre del archivo como un atributo en el archivo showupload.jsp.
Ejemplo
Java
// Java Program to Illustrate UploadFileController Class
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)
{
// Getting bytes of file and
// storing it in a byte array
byte[] data = file.getBytes();
String filePath
= s.getServletContext().getRealPath("/")
+ "WEB-INF" + File.separator + "resources"
+ File.separator + "image" + File.separator
+ file.getOriginalFilename();
// Try block to check for exceptions
try {
// Creating an object of FileOutputStream class
FileOutputStream fileout
= new FileOutputStream(filePath);
fileout.write(data);
// Closing connections of file
// using close() method
fileout.close();
mod.addAttribute("imgName",
file.getOriginalFilename());
}
// Catch block to handle the exceptions
catch (Exception e) {
// Displaying the exception/s along with
// line number using printStackTrace() method
e.printStackTrace();
}
return "showupload";
}
}
Paso 8: El fileform.jsp en la carpeta de vistas define el formulario de carga con enctype como multipart/form-data. Hemos utilizado bootstrap para el estilo adecuado de la página.
Ejemplo
HTML
<!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>
La página showupload.jsp muestra la imagen cargada usando jsp para mapear la URL de la imagen.
HTML
<%@ 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>
Después de agregar todas las clases y el archivo de configuración, la estructura del proyecto debería verse así:
Paso 9: ahora es el momento de ejecutar su proyecto, inicie el servidor Tomcat y ejecute su aplicación, ahora escriba «http://localhost:8080/SpringMVCFileUpload/upload» en cualquier navegador.
Producción:
Cargue la imagen y haga clic en cargar, esto lo redirigirá a la página de carga del programa y verá su imagen cargada.
Así que creamos una aplicación web Spring MVC con un formulario de carga y mostramos la imagen cargada en la web.
Publicación traducida automáticamente
Artículo escrito por ashutosh44 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA