Connexion et déconnexion Angular Spring Bibliothèque de balises JSP Security Spring

Téléversement de fichier Spring Angular

Dans cette section, nous créerons une application Web de téléversement de fichier. Cette demande comprend un registre. Dans cette intégration, nous utilisons Spring pour traiter la partie backend, et Angular pour traiter la partie frontend.

Application de travail

Une fois l'application déployée sur le serveur, une page d'enregistrement est générée. L'utilisateur peut remplir les informations nécessaires et télécharger une image. Rappelez-vous que la taille de l'image ne doit pas dépasser1 MB.

Outils à utiliser

Développer des projets Spring et Hibernate avec n'importe quel IDE. Il peut s'agir de MyEclipse/Eclipse/Netbeans. Ici, nous utilisons Eclipse. MySQL pour la base de données. Développer un projet Angular avec n'importe quel IDE. Il peut s'agir de Visual Studio Code/Sublime. Ici, nous utilisons Visual Studio Code. Serveur: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Les technologies que nous utilisons

Ici, nous utilisons les technologies suivantes:

Spring5 Hibernate5 Angular6 MYSQL

Créer la base de données

Créons la base de données fileuploadexample 。Aucun tableau à créer, car Hibernate le créera automatiquement.

Module Spring

Voyons la structure de répertoire de Spring que nous devons suivre:

Pour développer une application de téléversement de fichiers, suivez les étapes suivantes: -

Ajouter les dépendances au fichier pom.xml.

pom.xml

Exemple

<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>
	<!--　Ajouter Jackson pour les convertisseurs 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>
	<!--　pour compenser java　9　ne pas inclure jaxb　-->
	<dependency>
		<groupId>javax.xml.bind</<groupId>
		<artifactId>jaxb-<api/<artifactId>
		<version>2.3.0</<version>
	</<dependency>
　	
　	<!--　　Dépendance JUnit　-->
　　　　<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>

Création de la classe de configuration
Nous exécutons une configuration basée sur les annotations au lieu de XML. Par conséquent, nous créons deux classes et y spécifions les configurations nécessaires.

DemoAppConfig.java

Exemple

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.w")3codebox.FileUploadExample)
@PropertySource(value = { "classpath:persistence" })-@PropertySource(value = { "classpath:properties/mysql.properties" })
@PropertySource(value = { "classpath:persistence" })-@PropertySource(value = { "classpath:properties/mysql.properties" })
@PropertySource(value = { "classpath:application.properties" })
public class DemoAppConfig implements WebMvcConfigurer {
	@Autowired
	private Environment env;
	@Bean
	public DataSource myDataSource() {
		//　créer un pool de connexions
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		//　configurer le pilote jdbc
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			lancer une nouvelle RuntimeException(exc);
		}
		//　configurer la propriété de connexion de base de données
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		//　configurer les propriétés du pool de connexions
		myDataSource.setInitialPoolSize(get_intProperty("connection.pool.initialPoolSize"));
		myDataSource.setMinPoolSize(get_intProperty("connection.pool.minPoolSize"));
		myDataSource.setMaxPoolSize(get_intProperty("connection.pool.maxPoolSize"));		
		myDataSource.setMaxIdleTime(get_intProperty("connection.pool.maxIdleTime"));
		retourner myDataSource;
	}
	private Properties getHibernateProperties() {
		//　configurer les propriétés 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"));
		retourner props;				
	}
	//　besoin d'une méthode d'aide　
	//　lire la propriété d'environnement et la convertir en int
	private int get_intProperty(String propName) {
		String propVal = env.getProperty(propName);
		//　Convertir maintenant en int
		int intPropVal = Integer.parseInt(propVal);
		return intPropVal;
	}	
	@Bean
	public LocalSessionFactoryBean sessionFactory(){
		//　Créer les factorys de session
		LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
		//　Définir les propriétés
		sessionFactory.setDataSource(myDataSource());
		sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
		sessionFactory.setHibernateProperties(getHibernateProperties());
		return sessionFactory;
	}
	@Bean
	@Autowired
	public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
		//　Configurer le gestionnaire de transactions basé sur la factory de session
		HibernateTransactionManager txManager = new HibernateTransactionManager();
		txManager.setSessionFactory(sessionFactory);
		return txManager;
	}	
	@Bean(name="multipartResolver")
　　　　public CommonsMultipartResolver getResolver() throws IOException{
　　　　　　　　CommonsMultipartResolver resolver = new CommonsMultipartResolver();
　　　　　　　　　
　　　　　　　　//Définir la taille maximale autorisée (en octets) pour chaque fichier individuel.
　　　　　　　//　resolver.setMaxUploadSize(5242880);//5MB
　　　　　　　　
　　　　　　　　resolver.setMaxUploadSize(524288);//0.5MB
　　　　　　　　
　　　　　　　　//Vous pouvez également définir d'autres propriétés disponibles.　　
　　　　　　　　return resolver;
　　　　}
}

MySpringMvcDispatcherServletInitializer.java

Exemple

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

Créer la classe entité
Ici, nous allons créer une Entity/POJO ( objet Java ordinaire ) classe.

UserDetail.java

Exemple

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　+　"]";
	}
}

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

UserDAO.java

Exemple

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

创建DAO接口实现类

UserDAOImpl.java

Exemple

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("Erreur lors de la mise à jour de l'image de profil depuis le DAO :: ");　+　exception.getMessage());
			return　-5;
		}
		finally
		{
			session.flush();
		}
	}
}

Créer une interface de couche de service

Ici, nous créons une interface de couche de service qui agit comme un pont entre le DAO et la classe d'entité.

UserService.java

Exemple

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

Créer une classe d'implémentation de couche de service

UserServiceImpl.java

Exemple

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("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("Erreur lors de l'upload de l'image lorsque l'image existe déjà :: ");　+　exception.getMessage());
					return　-5;
				}
			}
		}
		else {
			return 0;
		}
	}
}

Créer une classe contrôleur

UserController.java

Exemple

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

Création de fichiers de propriétés
Ici, nous sommes en train de créer le src/main/resources Création de fichiers de propriétés internes.

application.properties

Exemple

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

persistence-mysql.properties

Exemple

## Propriétés de connexion JDBC #
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/fileuploadexample?useSSL=false
jdbc.user=root
jdbc.password=
## Propriétés du pool de connexions #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Propriétés 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

Module Angular

Voyons la structure de répertoire Angular que nous devons suivre:

Créer un projet Angular

Laissez-nous utiliser la commande suivante pour créer un projet Angular:

ng new FileUploadExample

Ici, FileUploadExample C'est le nom du projet.

Installer le cadre CSS Bootstrap

Installez le programme de guide avec la commande suivante dans le projet.

Exemple

npm install [email protected]　--save

Maintenant, incluez le code suivant dans le fichier style.css.

Exemple

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

Générer le composant
Ouvrez le projet dans Visual Studio, puis utilisez les commandes suivantes pour générer le composant Angular:
ng g c Register

Nous utilisons également les commandes suivantes: -

ng gs services/UserDetail

Éditer app.module.ts Fichier Import ReactiveFormsModule -Ici, nous allons importer ReactiveFormsModule pour reactive form et la spécifions dans le tableau d'imports. import HttpModule -Ici, nous allons importer HttpModule et la spécifiez dans le tableau d'imports. enregistrez la classe de service-Ici, nous mentionnons la classe de service dans le tableau des fournisseurs.

Exemple

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

Éditer app.component.html Fichier

Exemple

<app-register></app-register>

créer UserDetail.ts classe

Utilisons la commande suivante pour créer une classe: -

ng g class/UserDetail

Maintenant, dans UserDetail spécifiez les champs obligatoires dans la classe.

Exemple

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

L'objectif de ce type est de mapper les champs spécifiés avec les champs des classes d'entités Spring.

Éditer user-detail.service.ts Fichier

Exemple

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

Éditer register.component.ts Fichier

Exemple

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("téléversement du fichier réussi");
　　　　　　　　　　　　　　　　　　　　　　　　this.form.get('fullName').setValue("");
　　　　　　　　　　　　　　　　　　　　　　　　this.form.get('email').setValue("");
　　　　　　　　　　　　　　　　　　　　　　　　this.form.get('profileImage').setValue("");
　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　else{
　　　　　　　　　　　　　　　　　　　　　　　　alert("erreur lors du téléversement des détails du fichier");
　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　err => {
　　　　　　　　　　　　　　　　　　　　　　alert("erreur lors du téléversement des détails du fichier");
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　);
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　},
　　　　　　error => {
　　　　　　　　console.log("erreur lors de l'enregistrement des données dans la base de données");
　　　　　　}
　　　　);
　　}
　　　　get FullName(){
　　　　　　return this.form.get('fullName');
　　　　}
　　　　get Email(){
　　　　　　　　return this.form.get('email');
　　　　}　
　　　　　
}

Éditer register.component.html Fichier

Exemple

<h2>Formulaire d'enregistrement</h2>
<form [formGroup]="form" #AdminInformation (ngSubmit)="AdminForm(AdminInformation)">
　　<div　class="row">
　　　　<div　class="　col-md-offset-1　col-md-4">
　　　　　　　　<label for="fullName"> Nom </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">Télécharger　Image</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"　　>Enregistrer</button>
　　　　</div>
　　</div>
</form>

Après la fin, fournissez l'URL http: //localhost: 4200/Navigateur. Une page suivante s'affiche:

Maintenant, nous pouvons remplir les informations nécessaires et sélectionner les fichiers à télécharger.

Connexion et déconnexion Angular Spring Bibliothèque de balises JSP Security Spring

Tutoriel Spring

Téléversement de fichier Spring Angular

Application de travail

Outils à utiliser

Les technologies que nous utilisons

Créer la base de données

Module Spring

Module Angular

Installer le cadre CSS Bootstrap