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

Tutorial Spring

Upload de arquivo Spring Angular

Nesta seção, criaremos um aplicativo Web de Upload de Arquivos. Este aplicativo inclui um registro. Nesta integração, usamos Spring para o back-end e Angular para o front-end.

Aplicativo de trabalho

Assim queDeployamos o aplicativo no servidor, será gerado uma página de registro. O usuário pode preencher as informações necessárias e upload de imagens. Lembre-se de que o tamanho da imagem não deve ultrapassar1 MB.

Ferramentas a serem usadas

Use qualquer IDE para desenvolver projetos Spring e Hibernate. Pode ser o MyEclipse/Eclipse/Netbeans. Aqui, estamos usando Eclipse. para banco de dados MySQL. Use qualquer IDE para desenvolver projetos Angular. Pode ser o Visual Studio Code/Sublime. Aqui, estamos usando Visual Studio Code. Servidor: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Tecnologias que usamos

Aqui, usamos as seguintes tecnologias:

Spring5 Hibernate5 Angular6 MYSQL

Criar banco de dados

Vamos criar o banco de dados fileuploadexample Não é necessário criar a tabela, pois o Hibernate criará automaticamente.

Módulos do Spring

Vamos ver a estrutura de diretórios do Spring que devemos seguir:

Para desenvolver um aplicativo de upload de arquivo, execute os seguintes passos: -

Adicionar dependências ao arquivo 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>
	</propriedades>
　　<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>
	<!--　Adicionar Jackson para conversores 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　não incluindo jaxb　-->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-<api>/artifactId>
		<version>2.3.0</version>
	</dependency>
　	
　	<!--　　JUnit dependência　-->
　　　　<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>

Criar classe de configuração
Executamos configurações baseadas em comentários, em vez de XML. Portanto, criamos duas classes e especificamos a configuração necessária nelas.

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 {
	@Autowired
	private Environment env;
	@Bean
	public DataSource myDataSource() {
		//　criar pool de conexões
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		//　definir o driver jdbc
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			lançar nova RuntimeException(exc);
		}
		//　definir propriedades de conexão de banco de dados
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		//　definir props do pool de conexões
		myDataSource.setInitialPoolSize(getIntProperty("connection.pool.initialPoolSize"));
		myDataSource.setMinPoolSize(getIntProperty("connection.pool.minPoolSize"));
		myDataSource.setMaxPoolSize(getIntProperty("connection.pool.maxPoolSize"));		
		myDataSource.setMaxIdleTime(getIntProperty("connection.pool.maxIdleTime"));
		retornar myDataSource;
	}
	private Properties getHibernateProperties() {
		//　definir propriedades do 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"));
		retornar props;				
	}
	//　precisa de um método auxiliar　
	//　ler propriedade do ambiente e converta para int
	private int getIntProperty(String propName) {
		String propVal = env.getProperty(propName);
		//　agora converta para int
		int intPropVal = Integer.parseInt(propVal);
		return intPropVal;
	}	
	@Bean
	public LocalSessionFactoryBean sessionFactory(){
		//　criar fabricantes de sessão
		LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
		//　definir as propriedades
		sessionFactory.setDataSource(myDataSource());
		sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
		sessionFactory.setHibernateProperties(getHibernateProperties());
		return sessionFactory;
	}
	@Bean
	@Autowired
	public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
		//　configurar o gerenciador de transações com base no fabricante de sessão
		HibernateTransactionManager txManager = new HibernateTransactionManager();
		txManager.setSessionFactory(sessionFactory);
		return txManager;
	}	
	@Bean(name="multipartResolver")
　　　　public CommonsMultipartResolver getResolver() throws IOException{
　　　　　　　　CommonsMultipartResolver resolver = new CommonsMultipartResolver();
　　　　　　　　　
　　　　　　　　//Defina o tamanho máximo permitido (em bytes) para cada arquivo individual.
　　　　　　　//　resolver.setMaxUploadSize(5242880);//5MB
　　　　　　　　
　　　　　　　　resolver.setMaxUploadSize(524288);//0.5MB
　　　　　　　　
　　　　　　　　//Você também pode definir outras propriedades disponíveis.　　
　　　　　　　　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-metodo stub gerado
		return null;
	}
	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { DemoAppConfig.class };
	}
	@Override
	protected String[] getServletMappings() {
		return new String[] { "/"　};
	}
}

Criar classe de entidade
Aqui, criaremos um Entity/Classe POJO (Objeto Java Padrão comum).

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;
import com.w3codebox.FileUploadExample.entity.UserDetail;
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;
import com.w3codebox.FileUploadExample.DAO.interfaces.UserDAO;
import com.w3codebox.FileUploadExample.entity.UserDetail;
@Repository("userDAO")
public class UserDAOImpl implements UserDAO {
	@Autowired
	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("Erro ao atualizar a imagem do perfil do DAO :: ");　+　exception.getMessage());
			return　-5;
		}
		finally
		{
			session.flush();
		}
	}
}

Criar a interface da camada de serviço

Aqui, estamos criando uma interface de camada de serviço, que atua como uma ponte entre o DAO e a classe de entidade.

UserService.java 

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

Criar a classe de implementação da camada de serviço

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.multipart.MultipartFile;
import com.w3codebox.FileUploadExample.DAO.interfaces.UserDAO;
import com.w3codebox.FileUploadExample.entity.UserDetail;
import com.w3codebox.FileUploadExample.service.interfaces.UserService;
@Service("userService")
public class UserServiceImpl implements UserService {
	@Autowired
	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("/resources/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("erro ao carregar imagem 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("Erro ao carregar imagem ao carregar imagem já existe :: ");　+　exception.getMessage());
					return　-5;
				}
			}
		}
		else {
			return 0;
		}
	}
}

Criar classe 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.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.w3codebox.FileUploadExample.entity.UserDetail;
import com.w3codebox.FileUploadExample.service.interfaces.UserService;
@RestController
@RequestMapping("/api"
@CrossOrigin(origins = ", http://localhost:42"00", allowedHeaders = ",*)
public class UserController {
	@Autowired
	private UserService userService;
	@PostMapping("/saveUser)
	public int saveUser(@RequestBody UserDetail userDetail)
	{
		return userService.saveUser(userDetail);
	}
	@PostMapping("/uploadImage/{userId}"
	public int handleFileUpload(@PathVariable int userId, @RequestParam("file") MultipartFile file, HttpSession session) {
		return userService.store(file, userId, session);		
	}
}

criar arquivo de propriedades
Aqui, estamos criando o projeto src/main/resources Internamente, criamos um arquivo de propriedades.

application.properties 

spring.http.multipart.max-file-size=1024KB
spring.http.multipart.max-request-size=1024KB

persistence-mysql.properties 

## propriedades de conexão JDBC #
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/fileuploadexample?useSSL=false
jdbc.user=root
jdbc.password=
## propriedades do pool de conexões #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## propriedades Hibernate #
<!--　hibernate.dialect=org.hibernate.dialect.MySQLDialect　-->
hibernate.dialect=org.hibernate.dialect.MySQL5Dialeto
hibernate.show_sql=true
hibernate.format_sql=true
hibernate.hbm2ddl=update
hibernate.packagesToScan=com.w3codebox.FileUploadExample.entity

Módulo Angular

Vamos ver a estrutura de diretórios Angular que devemos seguir:

Criar um projeto Angular

Vamos usar os seguintes comandos para criar um projeto Angular:

ng new FileUploadExample


Aqui, FileUploadExample é o nome do projeto.

Instalar o framework CSS Bootstrap

Use o seguinte comando para instalar o guia no projeto.

npm install [email protected]　--salvar

Agora, inclua o seguinte código no arquivo style.css.

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

Gerar componente
Abra o projeto no Visual Studio e use os seguintes comandos para gerar o componente Angular:
ng g c Register

Nós também usamos os seguintes comandos: -

ng gs services/UserDetail

Edição app.module.ts Arquivo Importar ReactiveFormsModule -Aqui, importaremos ReactiveFormsModule para o formato reativo e especificá-lo no array de imports. importar HttpModule -Aqui, importaremos para HttpModule e especificá-la no array de imports. registrar a classe do serviço-Aqui, mencionamos a classe do serviço no array de provedores. 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//　import ReactiveFormsModule for reactive form
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 { }

Edição app.component.html Arquivo

<app-register></app-register>

criar UserDetail.ts classe

Vamos usar o seguinte comando para criar uma classe: -

ng g classe/UserDetail

Agora, em UserDetail especificar os campos obrigatórios na classe.

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

O objetivo deste tipo é mapear os campos especificados para os campos das classes de entidade do Spring.

Edição user-detail.service.ts Arquivo

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);
　　}
}

Edição register.component.ts Arquivo

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');
　　　　}　
　　　　　
}

Edição register.component.html Arquivo

<h2>Formulário 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"> Nome </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">　Email　</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">Carregar　Imagem</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"　　>Salvar</button>
　　　　</div>
　　</div>
</form>

Após a conclusão, forneça o URL http: //localhost: 4200/Navegador. Aparece a seguinte página:

Agora, podemos preencher as informações necessárias e escolher os arquivos a serem carregados.

Login e Logout Angular do SpringBiblioteca de Tags JSP da Segurança Spring