English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales de Spring

Subida de archivos Spring Angular

En esta sección, crearemos una aplicación web de carga de archivos. Esta solicitud incluye un registro. En esta integración, utilizamos Spring para manejar la parte trasera, y Angular para manejar la parte frontal.

Aplicación de trabajo

Una vez que hayamos desplegado la aplicación en el servidor, se generará una página de registro. El usuario puede llenar la información necesaria y subir una imagen. Recuerde, el tamaño de la imagen no debe superar1 MB.

Herramientas a utilizar

Utilizar cualquier IDE para desarrollar proyectos de Spring y Hibernate. Puede ser MyEclipse/Eclipse/Netbeans. Aquí estamos utilizando Eclipse. MySQL para bases de datos. Utilizar cualquier IDE para desarrollar proyectos de Angular. Puede ser Visual Studio Code/Sublime. Aquí estamos utilizando Visual Studio Code. Servidor: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Tecnologías que utilizamos

Aquí, utilizamos las siguientes tecnologías:

Spring5 Hibernate5 Angular6 MYSQL

Crear base de datos

Vamos a crear la base de datos fileuploadexample No es necesario crear tablas, ya que Hibernate las creará automáticamente.

Módulos de Spring

Veamos la estructura de directorios de Spring que debemos seguir:

Para desarrollar la aplicación de subida de archivos, siga los siguientes pasos: -

Añadir dependencias al archivo pom.xml.

pom.xml 

<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/maven-v4_0_0.xsd">
　　<modelVersion>4.0.0</modelVersion>
　　<groupId>com.w3codebox</<groupId>
　　<artifactId>FileUploadExample</<artifactId>
　　<packaging>war</packaging>
　　<version>0.0.1-SNAPSHOT</<version>
　　<name>FileUploadExample　Maven　Webapp</name>
　　<url>http://maven.apache.org</url>
　　
　　<properties>
		<springframework.version>5.0.6.RELEASE</springframework.version>
		<hibernate.version>5.2.16.Final</hibernate.version>
		<mysql.connector.version>5.1.45</mysql.connector.version>
		<c3po.version>0.9.5.2</c3po.version>
		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>
	</properties>
　　<dependencies>
　　
　　　<!--　Spring　-->
	<dependency>
		<groupId>org.springframework</<groupId>
		<artifactId>spring-webmvc</<artifactId>
		<version>${springframework.version}</<version>
	</<dependency>
	<dependency>
		<groupId>org.springframework</<groupId>
		<artifactId>spring-tx</<artifactId>
		<version>${springframework.version}</<version>
	</<dependency>
	<dependency>
		<groupId>org.springframework</<groupId>
		<artifactId>spring-orm</<artifactId>
		<version>${springframework.version}</<version>
	</<dependency>
	<!--　Agregar Jackson para convertidores JSON　-->
	<dependency>
		<groupId>com.fasterxml.jackson.core</<groupId>
		<artifactId>jackson-databind</<artifactId>
		<version>2.9.5</<version>
	</<dependency>
	<!--　Hibernate　-->
	<dependency>
		<groupId>org.hibernate</<groupId>
		<artifactId>hibernate-core</<artifactId>
		<version>${hibernate.version}</<version>
	</<dependency>
	<!--　MySQL　-->
	<dependency>
		<groupId>mysql</<groupId>
		<artifactId>mysql-connector-java</<artifactId>
		<version>${mysql.connector.version}</<version>
	</<dependency>
	<!--　C3PO　-->
	<dependency>
		<groupId>com.mchange</<groupId>
		<artifactId>c3p0</<artifactId>
		<version>${c3po.version></<version>
	</<dependency>
	<!--　Servlet+JSP+JSTL　-->
	<dependency>
		<groupId>javax.servlet</<groupId>
		<artifactId>javax.servlet<-api</<artifactId>
		<version>3.1.0</<version>
	</<dependency>
	<dependency>
		<groupId>javax.servlet.jsp</<groupId>
		<artifactId>javax.servlet.jsp<-api</<artifactId>
		<version>2.3.1</<version>
	</<dependency>
	<dependency>
		<groupId>javax.servlet</<groupId>
		<artifactId>jstl</<artifactId>
		<version>1.2</<version>
	</<dependency>
	<!--　para compensar java　9　no incluir jaxb　-->
	<dependency>
		<groupId>javax.xml.bind</<groupId>
		<artifactId>jaxb-api</<artifactId>
		<version>2.3.0</<version>
	</<dependency>
　	
　	<!--　　JUnit　dependency　-->
　　　　<dependency>
　　　　　　　　<groupId>junit</<groupId>
　　　　　　　　<artifactId>junit</<artifactId>
　　　　　　　　<version>3.8.1</<version>
　　　　　　　　<scope>test</scope>
　　　　</<dependency>
　　　　
　　　　　　　　　<!--　https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload　-->
	<dependency>
	　　　　<groupId>commons-fileupload</<groupId>
	　　　　<artifactId>commons-fileupload</<artifactId>
	　　　　<version>1.3</<version>
	</<dependency>
	<!--　https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2　-->
	<dependency>
	　　　　<groupId>org.apache.commons</<groupId>
	　　　　<artifactId>commons-dbcp2</<artifactId>
	　　　　<version>2.0</<version>
	</<dependency>　
　　　　
　　　　
　　　　
　　</<dependencies>
　　<build>
　　　　<finalName>FileUploadExample</finalName>
　　</build>
</project>

创建配置类
执行基于注释的配置，而不是XML。因此，我们创建两个类并在其中指定所需的配置。

DemoAppConfig.java 

package com.w;3codebox.FileUploadExample.config;
import java.beans.PropertyVetoException;
import java.io.IOException;
import java.util.Properties;
import javax.sql.DataSource;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.env.Environment;
import org.springframework.orm.hibernate;5.HibernateTransactionManager;
import org.springframework.orm.hibernate;5.LocalSessionFactoryBean;
import org.springframework.transaction.annotation.EnableTransactionManagement;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import com.mchange.v2.c3p0.ComboPooledDataSource;
@Configuration
@EnableWebMvc
@EnableTransactionManagement
@ComponentScan("com.w3codebox.FileUploadExample")
@PropertySource(value = { "classpath:persistence-mysql.properties" })
@PropertySource(value = { "classpath:persistence-mysql.properties" })
@PropertySource(value = { "classpath:application.properties" })
public class DemoAppConfig implements WebMvcConfigurer {
	public class UserController {
	private Environment env;
	@Bean
	public DataSource myDataSource() {
		//　crear piscina de conexiones
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		//　establecer el controlador jdbc
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			lanzar new RuntimeException(exc);
		}
		//　establecer propiedades de conexión de base de datos
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		//　establecer propiedades de la piscina de conexión
		myDataSource.setInitialPoolSize(getIntProperty("connection.pool.initialPoolSize"));
		myDataSource.setMinPoolSize(getIntProperty("connection.pool.minPoolSize"));
		myDataSource.setMaxPoolSize(getIntProperty("connection.pool.maxPoolSize"));		
		myDataSource.setMaxIdleTime(getIntProperty("connection.pool.maxIdleTime"));
		devolver myDataSource;
	}
	private Properties getHibernateProperties() {
		//　establecer propiedades de hibernate
		Properties props = new Properties();
		props.setProperty("hibernate.dialect", env.getProperty("hibernate.dialect"));
		props.setProperty("hibernate.show_sql", env.getProperty("hibernate.show_sql"));
		props.setProperty("hibernate.format_sql", env.getProperty("hibernate.format_sql"));
		props.setProperty("hibernate.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl"));
		devolver props;				
	}
	//　necesita un método auxiliar　
	//　leer la propiedad del entorno y convertirla a int
	private int getIntProperty(String propName) {
		String propVal = env.getProperty(propName);
		//　ahora convierta a int
		int intPropVal = Integer.parseInt(propVal);
		return intPropVal;
	}	
	@Bean
	public LocalSessionFactoryBean sessionFactory(){
		//　crear fábricas de sesión
		LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
		//　establecer las propiedades
		sessionFactory.setDataSource(myDataSource());
		sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
		sessionFactory.setHibernateProperties(getHibernateProperties());
		return sessionFactory;
	}
	@Bean
	public class UserController {
	public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
		//　configurar el administrador de transacciones basado en la fábrica de sesiones
		HibernateTransactionManager txManager = new HibernateTransactionManager();
		txManager.setSessionFactory(sessionFactory);
		return txManager;
	}	
	@Bean(name="multipartResolver")
　　　　public CommonsMultipartResolver getResolver() throws IOException{
　　　　　　　　CommonsMultipartResolver resolver = new CommonsMultipartResolver();
　　　　　　　　　
　　　　　　　　//Establezca el tamaño máximo permitido (en bytes) para cada archivo individual.
　　　　　　　//　resolver.setMaxUploadSize(5242880);//5MB
　　　　　　　　
　　　　　　　　resolver.setMaxUploadSize(524288);//0.5MB
　　　　　　　　
　　　　　　　　//您也可以设置其他可用的属性。　　
　　　　　　　　return resolver;
　　　　}
}

MySpringMvcDispatcherServletInitializer.java 

package com.w;3codebox.FileUploadExample.config;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {
	@Override
	protected Class<?>[] getRootConfigClasses() {
		//　TOdo Auto-generated method stub
		return null;
	}
	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { DemoAppConfig.class };
	}
	@Override
	protected String[] getServletMappings() {
		return new String[] { "/"　};
	}
}

创建实体类
在这里，我们将创建一个Entity/POJO(普通的旧Java对象)类。

UserDetail.java 

package com.w;3codebox.FileUploadExample.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name="user_detail")
public class UserDetail {
	@Id
	@GeneratedValue(strategy=GenerationType.AUTO)
	@Column(name="user_id")
	private int userId;
	@Column(name="email_id")
	public String emailId;
	@Column(name="name")
	public String name;
	@Column(name="profile_image")
	public String profileImage;
	public UserDetail() { }
	public UserDetail(int userId, String emailId, String name, String profileImage) {
		super();
		this.userId = userId;
		this.emailId = emailId;
		this.name = name;
		this.profileImage = profileImage;
	}
	public int getUserId() {
		return userId;
	}
	public void setUserId(int userId) {
		this.userId = userId;
	}
	public String getEmailId() {
		return emailId;
	}
	public void setEmailId(String emailId) {
		this.emailId = emailId;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getProfileImage() {
		return profileImage;
	}
	public void setProfileImage(String profileImage) {
		this.profileImage = profileImage;
	}
	@Override
	public String toString() {
		return "UserDetail [userId="　+　userId　+　"emailId="　+　emailId　+　"name="　+　name　+　"profileImage="
				+　profileImage　+　"]";
	}
}

Create DAO interface
Here, we are creating a DAO interface to perform database-related operations.

UserDAO.java 

package com.w;3codebox.FileUploadExample.DAO.interfaces;
codebox.FileUploadExample.entity.UserDetail;3import org.springframework.web.multipart.MultipartFile;
public interface UserDAO {
	public int saveUser(UserDetail userDetail);
	public UserDetail getUserDetail(int userId);
	public int updateProfileImage(String profileImage, int userID);
}

Create DAO interface implementation class

UserDAOImpl.java 

package com.w;3codebox.FileUploadExample.DAO.implementation;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.query.Query;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
codebox.FileUploadExample.entity.UserDetail;3codebox.FileUploadExample.DAO.interfaces.UserDAO;
codebox.FileUploadExample.entity.UserDetail;3import org.springframework.web.multipart.MultipartFile;
@Repository("userDAO")
public class UserDAOImpl implements UserDAO {
	public class UserController {
	SessionFactory sessionFactory;
	public int saveUser(UserDetail userDetail) {
		Session session = null;
		try
		{
			session = sessionFactory.getCurrentSession();
			int status = (Integer) session.save(userDetail);
			return status;
		}
		catch(Exception exception)
		{
			System.out.println("Exception in saving data into the database")　+　exception);
			return 0;
		}
		finally
		{
			session.flush();
		}
	}
	public UserDetail getUserDetail(int userId) {
		Session session = null;
		try
		{
			session = sessionFactory.getCurrentSession();
			UserDetail userDetail = session.get(UserDetail.class, userId);
			return userDetail;
		}
		catch(Exception exception)
		{
			System.out.println("Exception in saving data into the database ")　+　exception);
			return null;
		}
		finally
		{
			session.flush();
		}
	}
	public int updateProfileImage(String profileImage, int userID) {
		Session session = sessionFactory.getCurrentSession();
		int result;
		try
		{
			Query<UserDetail> query = session.createQuery("update UserDetail set profileImage = :profileImage where userId=:userID ");
			query.setParameter("profileImage", profileImage);
			query.setParameter("userID", userID);
			result = query.executeUpdate();
			if(result > 0)
			{
				return result;
			}
			else return　-5;
		}
		catch(Exception exception)
		{
			System.out.println("Error while updating profileImage from DAO :: ");　+　exception.getMessage());
			return　-5;
		}
		finally
		{
			session.flush();
		}
	}
}

创建服务层接口

在这里，我们正在创建一个服务层接口，充当DAO和实体类之间的桥梁。

UserService.java 

package com.w;3codebox.FileUploadExample.service.interfaces;
import javax.servlet.http.HttpSession;
import org.springframework.web.bind.annotation.RestController;
codebox.FileUploadExample.entity.UserDetail;3import org.springframework.web.multipart.MultipartFile;
public interface UserService {
	public int saveUser(UserDetail userDetail);
	public UserDetail getUserDetail(int userId);
	public int store(MultipartFile file, int userID, HttpSession session);
}

创建服务层实现类

UserServiceImpl.java 

package com.w;3codebox.FileUploadExample.service.implementation;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import javax.servlet.http.HttpSession;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RestController;
codebox.FileUploadExample.entity.UserDetail;3codebox.FileUploadExample.DAO.interfaces.UserDAO;
codebox.FileUploadExample.entity.UserDetail;3import org.springframework.web.multipart.MultipartFile;
codebox.FileUploadExample.entity.UserDetail;3import com.w
@Service("userService")
public class UserServiceImpl implements UserService {
	public class UserController {
	private UserDAO userDAO;
	@Transactional
	public int saveUser(UserDetail userDetail) {
		return userDAO.saveUser(userDetail);
	}
	@Transactional
	public UserDetail getUserDetail(int userId) {
		return userDAO.getUserDetail(userId);
	}
	@Transactional
	public int store(MultipartFile file, int userID, HttpSession session) {
		Path rootLocation = Paths.get(session.getServletContext().getRealPath("/recursos/images");
		System.out.println("rootLocation == ")　+　rootLocation);
		UserDetail userDetail = this.getUserDetail(userID);
		　
		　String nameExtension[] = file.getContentType().split("/");
		　String profileImage = userID　+　"."　+　nameExtension[1];
		　	
		　System.out.println("ProfileImage :: ")　+　profileImage);
		　
		　if(userDetail.getUserId() > 0)
		　{
			　
			if(userDetail.getProfileImage() == null || userDetail.getProfileImage() == " " || userDetail.getProfileImage() == "")
			{
				try
				{
					Files.copy(file.getInputStream(), rootLocation.resolve(profileImage));
					int result = userDAO.updateProfileImage(profileImage, userID);	
					if(result > 0)
						return result;
					else
						return　-5;
				}
				catch(Exception exception)
				{
					System.out.println("error while uploading image catch:: ")　+　exception.getMessage());
					return　-5;
				}
			}
			else
			{
				try
				{
					//Files.delete(rootLocation.resolve(profileImage));
					Files.delete(rootLocation.resolve(userDetail.getProfileImage()));
					Files.copy(file.getInputStream(), rootLocation.resolve(profileImage));
					int result = userDAO.updateProfileImage(profileImage, userID);	
					if(result > 0)
						return result;
					else
						return　-5;
				}
				catch(Exception exception)
				{
					System.out.println("Error al subir la imagen cuando la imagen ya existe :: ");　+　exception.getMessage());
					return　-5;
				}
			}
		}
		else {
			return 0;
		}
	}
}

Crear clase controladora

UserController.java 

package com.w;3codebox.FileUploadExample.restController;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import　org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
codebox.FileUploadExample.entity.UserDetail;3import org.springframework.web.multipart.MultipartFile;
codebox.FileUploadExample.entity.UserDetail;3import com.w
codebox.FileUploadExample.service.interfaces.UserService;
@RestController/@RequestMapping("
api)//localhost:42@CrossOrigin(origins = ",*"00", allowedHeaders = ",
})
	public class UserController {
	@Autowired
	return userService.saveUser(userDetail);/private UserService userService;
	saveUser)
	{
		public int saveUser(@RequestBody UserDetail userDetail)
	}
	return userService.saveUser(userDetail);/subirImagen/{userId}"
	public int handleFileUpload(@PathVariable int userId, @RequestParam("archivo") MultipartFile file, HttpSession session) {
		return userService.store(file, userId, session);		
	}
}

Crear archivos de propiedades
Aquí, estamos creando el proyecto de src/main/recursos Crear archivos de propiedades internamente.

application.properties 

spring.http.multipart.max-archivo-tamaño=1024KB
spring.http.multipart.max-solicitud-tamaño=1024KB

persistence-mysql.properties 

## propiedades de conexión JDBC #
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/fileuploadexample?useSSL=false
jdbc.user=root
jdbc.password=
## propiedades de la piscina de conexiones #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## propiedades de Hibernate #
<!--　hibernate.dialect=org.hibernate.dialect.MySQLDialect　-->
hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
hibernate.show_sql=true
hibernate.format_sql=true
hibernate.hbm2ddl=update
hibernate.packagesToScan=com.w3codebox.FileUploadExample.entity

Módulo Angular

Vamos a ver la estructura de directorios de Angular que debemos seguir:

Crear un proyecto Angular

Vamos a usar las siguientes órdenes para crear un proyecto Angular:

ng new FileUploadExample


Aquí, FileUploadExample es el nombre del proyecto.

Instalar el framework Bootstrap CSS

Instala el framework Bootstrap CSS con las siguientes órdenes en el proyecto.

npm install [email protected]　--save

Ahora, incluye el siguiente código en el archivo style.css.

@import "~bootstrap/dist/css/bootstrap.css";

Generar componentes
Abre el proyecto en Visual Studio y luego utiliza las siguientes órdenes para generar componentes Angular:
ng g c Register

Además, utilizamos las siguientes órdenes: -

ng gs services/UserDetail

editar app.module.ts archivo Importar ReactiveFormsModule -Aquí, importaremos ReactiveFormsModule para la forma reactiva y especificarla en el array de imports. Importar HttpModule -Aquí, importaremos para las solicitudes del servidor HttpModule y especificarla en el array de imports. Registrar la clase de servicio-Aquí, mencionamos la clase de servicio en el array de proveedores. 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//　import ReactiveFormsModule para forma reactiva
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RegisterComponent } from './register/register.component';
import { HttpModule } from '@angular/http';
@NgModule({
　　declarations: [
　　　　AppComponent,
　　　　RegisterComponent
　　],
　　imports: [
　　　　BrowserModule,
　　　　ReactiveFormsModule,
　　　　HttpModule
　　],
　　providers: [],
　　bootstrap: [AppComponent],
})
export class AppModule { }

editar app.component.html archivo

<app-register></app-register>

Crear UserDetail.ts clase

Vamos a usar el siguiente comando para crear una clase: -

ng g clase class/UserDetail

Ahora, en UserDetail especificar los campos obligatorios en la clase.

export class UserDetail {
　　　　emailId: string;
　　　　name: string;
　　　　profileImage: string;
}

El objetivo de este tipo es mapear los campos especificados con los campos de las clases de entidades de Spring.

editar user-detail.service.ts archivo

import { Injectable } from '@angular/core';
import { UserDetail } from '../classes/user-detail';
import { Observable } from 'rxjs';
import { Http, RequestOptions, Headers } from '@angular/http';
@Injectable({
　　providedIn: 'root'
})
export class UserDetailService {
　　//　Base URL
　　private baseUrl = "http://localhost:8080/FileUploadExample/api/";
　　constructor(private http: Http) { }
　　saveData(userDetail: UserDetail): Observable<any>
　　{
　　　　　　let url = this.baseUrl　+　"saveUser";
　　　　　　return this.http.post(url, userDetail);
　　}
　　uploadFile(file: File, id: number): Observable<any>
　　{
　　　　let url = this.baseUrl　+　"uploadImage/"　+　id ;
　　　　const formdata: FormData = new FormData();
　　
　　　　formdata.append('file', file);
　
　　　　return this.http.post(url, formdata);
　　}
}

editar register.component.ts archivo

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UserDetail } from '../classes/user-detail';
import { UserDetailService } from '../services/user-detail.service';
import { jsonpFactory } from '@angular/http/src/http_module';
@Component({
　　selector: 'app-register',
　　templateUrl: '.'}/register.component.html',
　　styleUrls: ['./register.component.css]
})
export class RegisterComponent implements OnInit {
　　selectedFiles: FileList;
　　currentFileUpload: File;
　　private userDetail = new UserDetail();　
　　
　　constructor(private userDetailService: UserDetailService) { }
　　ngOnInit() {
　　}
　　selectFile(event) {
　　　　const file = event.target.files.item(0);
　
　　　　if (file.type.match('image.*')) {
　　　　　　var size = event.target.files[0].size;
　　　　　　if(size >　1000000)
　　　　　　{
　　　　　　　　　　alert("size must not exceeds　1　MB);
　　　　　　　　　　this.form.get('profileImage').setValue("");
　　　　　　}
　　　　　　else
　　　　　　{
　　　　　　　　this.selectedFiles = event.target.files;
　　　　　　}
　　　　} else {
　　　　　　alert('invalid format!');
　　　　}
　　}　　　
　　//　create the form object.
　　form = new FormGroup({
　　　　fullName : new FormControl('', Validators.required),
　　　　email : new FormControl('', Validators.required),
　　　　profileImage : new FormControl()
　　});
　　AdminForm(AdminInformation)
　　{
　　　　this.userDetail.name = this.FullName.value;
　　　　this.userDetail.emailId = this.Email.value;
　　　　console.log(this.userDetail);
　　　　this.userDetailService.saveData(this.userDetail).subscribe(
　　　　　　response => {}}
　　　　　　　　　　let result = response.json();
　　　　　　　　　　console.log(result);
　　　　　　　　　　if(result > 0 )
　　　　　　　　　　{
　　　　　　　　　　　　if(this.selectedFiles != null)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　this.currentFileUpload = this.selectedFiles.item(0);
　　　　　　　　　　　　　　console.log(this.currentFileUpload);
　　　　　　　　　　　　　　this.userDetailService.uploadFile(this.currentFileUpload, result).subscribe(
　　　　　　　　　　　　　　　　　　res => {
　　　　　　　　　　　　　　　　　　　　let re = res.json();
　　　　　　　　　　　　　　　　　　　　　if(re > 0)
　　　　　　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　　　　　alert("file upload successfully ");
　　　　　　　　　　　　　　　　　　　　　　　　this.form.get('fullName').setValue("");
　　　　　　　　　　　　　　　　　　　　　　　　this.form.get('email').setValue("");
　　　　　　　　　　　　　　　　　　　　　　　　this.form.get('profileImage').setValue("");
　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　else{
　　　　　　　　　　　　　　　　　　　　　　　　alert("error while uploading file details");
　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　err => {
　　　　　　　　　　　　　　　　　　　　　　alert("error while uploading file details");
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　);
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　},
　　　　　　error => {
　　　　　　　　console.log("error while saving data in the DB");
　　　　　　}
　　　　);
　　}
　　　　get FullName(){
　　　　　　return this.form.get('fullName');
　　　　}
　　　　get Email(){
　　　　　　　　return this.form.get('email');
　　　　}　
　　　　　
}

editar register.component.html archivo

<h2>Formulario de registro</h2>
<form [formGroup]="form" #AdminInformation (ngSubmit)="AdminForm(AdminInformation)">
　　<div　class="row">
　　　　<div　class="　col-md-offset-1　col-md-4">
　　　　　　　　<label for="fullName"> Nombre/label>
　　　　　　　　<input formControlName="fullName" class="form-control"　type="text">　
　　　　</div>
　　</div>
　　<div　class="row">
　　　　<div　class="　col-md-offset-1　col-md-4">
　　　　　　　　<label　for="email">　Correo electrónico　</label>
　　　　　　　　<input　formControlName="email"　class="form-control"　type="text">　
　　　　</div>
　　</div>
　　
　　<div　class="row">
　　　　<div　class="　col-md-offset-1　col-md-4">
　　　　　　　　
　　　　　　<label　for="profileImage">Subir　Imagen</label>
　　　　　　　　<input　formControlName="profileImage"　class="form-control"　type="file"　(change)="selectFile($event)">　
　　　　</div>
　　</div>
　　<div　class="row"　style="margin-top:　40px;">
　　　　<div　class="col-md-offset-1　col-md-4">
　　　　　　　　<button　class="btn　btn-md　btn-primary　btn-style"　　>Guardar</button>
　　　　</div>
　　</div>
</form>

Después de completar, proporcione la URL http: //localhost: 4200/Navegador. Aparece la siguiente página web:

Ahora, podemos ingresar la información necesaria y seleccionar el archivo que deseamos subir.

Inicio de sesión y cierre de sesión de Angular de SpringBiblioteca de etiquetas JSP de Spring Security