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

Corso di Spring

File upload Spring Angular

In questa sezione, creeremo un'applicazione web di upload di file. Questa domanda include un modulo di registrazione. In questa integrazione, utilizziamo Spring per la parte backend e Angular per la parte frontend.

Applicazione in funzione

Una volta che avremo部署 l'applicazione sul server, verrà generata una pagina di registrazione. L'utente può compilare le informazioni necessarie e caricare un'immagine. Ricorda che la dimensione dell'immagine non deve superare 1 MB.

Strumenti da utilizzare

Utilizza qualsiasi IDE per sviluppare progetti Spring e Hibernate. Può essere MyEclipse/Eclipse/Netbeans. Qui stiamo utilizzando Eclipse. MySQL per il database. Utilizza qualsiasi IDE per sviluppare progetti Angular. Può essere Visual Studio Code/Sublime. Qui stiamo utilizzando Visual Studio Code. Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Tecnologie utilizzate

Qui, utilizziamo le seguenti tecnologie:

Spring5 Hibernate5 Angular6 MYSQL

Creazione del database

Creiamo il database fileuploadexample Non è necessario creare tabelle, perché Hibernate le crea automaticamente.

Modulo Spring

Vediamo la struttura di directory di Spring che dobbiamo seguire:

Per sviluppare un'applicazione di upload di file, esegui i seguenti passaggi: -

Aggiungi le dipendenze al file 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>
	<!-- Aggiungi Jackson per i convertitori 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>
	<!-- per compensare la mancanza di jaxb nel java 9 -->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-api</artifactId>
		<version>2.3.0</version>
	</dependency>
　	
　	<!-- JUnit dipendenza -->
　　　　<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>

Creazione della classe di configurazione
Eseguiamo la configurazione basata sui commenti, piuttosto che su XML. Pertanto, creiamo due classi e specifichiamo le configurazioni necessarie.

DemoAppConfig.java 

package com.w3codebox.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.hibernate5.HibernateTransactionManager;
import org.springframework.orm.hibernate5.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() {
		// creare il pool di connessioni
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		// impostare il driver jdbc
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			throw new RuntimeException(exc);
		}
		// impostare le proprietà della connessione database
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		// impostare le proprietà del pool di connessione
		myDataSource.setInitialPoolSize(getIntProperty("connection.pool.initialPoolSize"));
		myDataSource.setMinPoolSize(getIntProperty("connection.pool.minPoolSize"));
		myDataSource.setMaxPoolSize(getIntProperty("connection.pool.maxPoolSize"));		
		myDataSource.setMaxIdleTime(getIntProperty("connection.pool.maxIdleTime"));
		return myDataSource;
	}
	private Properties getHibernateProperties() {
		// impostare le proprietà di 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"));
		return props;				
	}
	// need a helper method　
	// read environment property and convert to int
	private int getIntProperty(String propName) {
		String propVal = env.getProperty(propName);
		// now convert to int
		int intPropVal = Integer.parseInt(propVal);
		return intPropVal;
	}	
	@Bean
	public LocalSessionFactoryBean sessionFactory(){
		// create session factorys
		LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
		// set the properties
		sessionFactory.setDataSource(myDataSource());
		sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
		sessionFactory.setHibernateProperties(getHibernateProperties());
		return sessionFactory;
	}
	@Bean
	@Autowired
	public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
		// Configura il gestore delle transazioni in base alla sessionFactory
		HibernateTransactionManager txManager = new HibernateTransactionManager();
		txManager.setSessionFactory(sessionFactory);
		return txManager;
	}	
	@Bean(name="multipartResolver")
　　　　public CommonsMultipartResolver getResolver() throws IOException{
　　　　　　　　CommonsMultipartResolver resolver = new CommonsMultipartResolver();
　　　　　　　　　
　　　　　　　　// Imposta la dimensione massima consentita (in byte) per ogni file individuale.
　　　　　　　// resolver.setMaxUploadSize(5242880); // 5MB
　　　　　　　　
　　　　　　　　resolver.setMaxUploadSize(524288); // 0.5MB
　　　　　　　　
　　　　　　　　// Puoi anche impostare altre proprietà disponibili.　　
　　　　　　　　return resolver;
　　　　}
}

MySpringMvcDispatcherServletInitializer.java 

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

Creazione della classe entità
Ecco, creeremo una classe Entity/POJO (ordinario oggetto Java) class.

UserDetail.java 

package com.w3codebox.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
	
		return "UserDetail [userId=\" + userId + \
				+ profileImage + "]";
	}
}

创建DAO接口
在这里，我们正在创建DAO接口以执行与数据库相关的操作。

UserDAO.java 

package com.w3codebox.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);
}

创建DAO接口实现类

UserDAOImpl.java 

package com.w3codebox.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) sessionFactory.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("Errore durante l'aggiornamento dell'immagine del profilo da DAO :: " + exception.getMessage());
			return -5;
		}
		finally
		{
			session.flush();
		}
	}
}

creare l'interfaccia di livello di servizio

In questo caso, stiamo creando un'interfaccia di livello di servizio che agisce come ponte tra l'DAO e le classi di entità.

UserService.java 

package com.w3codebox.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);
}

creare la classe di implementazione del livello di servizio

UserServiceImpl.java 

package com.w3codebox.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("errore durante l'upload dell'immagine 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("Errore durante l'upload dell'immagine quando l'immagine esiste già :: " + exception.getMessage());
					return -5;
				}
			}
		}
		else {
			return 0;
		}
	}
}

Creare la classe del controller

UserController.java 

package com.w3codebox.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:4200", 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);		
	}
}

Creare un file di proprietà
Qui, stiamo lavorando sul progetto src/main/resources Creare un file di proprietà internamente.

application.properties 

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

persistence-mysql.properties 

## Proprietà di connessione JDBC ##
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/fileuploadexample?useSSL=false
jdbc.user=root
jdbc.password=
## Proprietà del pool di connessione #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Proprietà 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

Modulo Angular

Ecco la struttura di directory che dobbiamo seguire per Angular:

Creare un progetto Angular

Creiamo un progetto Angular con i seguenti comandi:

ng new FileUploadExample


Ecco, FileUploadExample È il nome del progetto.

Installare il framework CSS Bootstrap

Installa il framework Bootstrap CSS con i seguenti comandi.

npm install [email protected] --save

Ora, includi il seguente codice nel file style.css.

@import \

Generare componenti
Apri il progetto in Visual Studio e utilizza i seguenti comandi per generare componenti Angular:
ng g c Register

abbiamo anche utilizzato i seguenti comandi: -

ng gs services/UserDetail

Modifica app.module.ts File import ReactiveFormsModule -Ecco, importeremo ReactiveFormsModule per reattività e specificarlo nell'array imports. import HttpModule -Ecco, importeremo richieste per il server HttpModule ，并在imports数组中指定它。 注册服务类在这里，我们在提供者的数组中提到了服务类。 

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 { }

Modifica app.component.html File

<app-register></app-register>

创建 UserDetail.ts 类

让我们使用以下命令创建一个类: -

ng g类class/UserDetail

现在，在 UserDetail 类中指定必填字段。

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

此类的目的是将指定的字段与Spring实体类的字段进行映射。

Modifica user-detail.service.ts File

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

Modifica register.component.ts File

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("caricamento del file avvenuto con successo");
　　　　　　　　　　　　　　　　　　　　　　　　this.form.get('fullName').setValue("");
　　　　　　　　　　　　　　　　　　　　　　　　this.form.get('email').setValue("");
　　　　　　　　　　　　　　　　　　　　　　　　this.form.get('profileImage').setValue("");
　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　else{
　　　　　　　　　　　　　　　　　　　　　　　　alert("errore durante il caricamento dei dettagli del file");
　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　err => {
　　　　　　　　　　　　　　　　　　　　　　alert("errore durante il caricamento dei dettagli del file");
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　);
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　},
　　　　　　error => {
　　　　　　　　console.log("errore durante il salvataggio dei dati nel DB");
　　　　　　}
　　　　);
　　}
　　　　get FullName(){
　　　　　　return this.form.get('fullName');
　　　　}
　　　　get Email(){
　　　　　　　　return this.form.get('email');
　　　　}　
　　　　　
}

Modifica register.component.html File

<h2>Modulo di registrazione</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">Carica Immagine</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">Salva</button>
　　　　</div>
　　</div>
</form>

Dopo aver completato, fornire l'URL http: //localhost: 4200/nel browser. Comparirà la seguente pagina web:

Ora possiamo inserire le informazioni necessarie e selezionare il file da caricare.

Accesso e disconnessione Angular di SpringBiblioteca di etichette JSP di Spring Security