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

Spring-Tutorial

Spring Angular Datei hochladen

In diesem Abschnitt erstellen wir eine File Upload Webanwendung. Diese Anwendung umfasst ein Registrierungsformular. Bei dieser Integration verwenden wir Spring für den Backend-Teil und Angular für den Frontend-Teil.

Arbeitsanwendung

Sobald wir die Anwendung auf dem Server bereitstellen, wird eine Registrierungsseite generiert. Der Benutzer kann die erforderlichen Informationen eingeben und ein Bild hochladen. Denken Sie daran, dass die Bildgröße nicht größer als1 MB.

Zu verwendende Werkzeuge

Verwenden Sie jede IDE, um Spring- und Hibernate-Projekte zu entwickeln. Es könnte MyEclipse sein/Eclipse/Netbeans. Hier verwenden wir Eclipse. Für Datenbanken MySQL. Verwenden Sie jede IDE, um Angular-Projekte zu entwickeln. Es könnte Visual Studio Code sein/Sublime. Hier verwenden wir Visual Studio Code. Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Verwendete Technologien

Hier verwenden wir folgende Technologien:

Spring5 Hibernate5 Angular6 MYSQL

Erstellen Sie die Datenbank

Lassen Sie uns die Datenbank erstellen fileuploadexample Es ist nicht erforderlich, Tabellen zu erstellen, da Hibernate dies automatisch erledigt.

Spring-Modul

Lassen Sie uns schauen, welche Spring-Verzeichnisstruktur wir befolgen müssen:

Um eine Datei-Upload-Anwendung zu entwickeln, führen Sie die folgenden Schritte aus: -

Fügen Sie die Abhängigkeiten in die Datei pom.xml hinzu.

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>
	</eigenschaften>
　　<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>
	<!--　Fügen Sie Jackson für JSON Konverter hinzu　-->
	<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>
	<!--　um java auszugleichen　9　ohne jaxb　-->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-<api>/artifactId>
		<version>2.3.0</version>
	</dependency>
　	
　	<!--　　JUnit Abhängigkeit　-->
　　　　<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>

Erstellen Sie die Konfigurationsklasse
Wir führen eine kommentarbasierte Konfiguration aus, anstatt XML. Daher erstellen wir zwei Klassen und geben in ihnen die erforderlichen Konfigurationen an.

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() {
		//　create connection pool
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		//　set the jdbc driver
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			throw new RuntimeException(exc);
		}
		//　set database connection props
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		//　stellen Sie die Verbindungspool-Properties ein
		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() {
		//　stellen Sie die Hibernate-Properties ein
		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;				
	}
	//　benötigen Sie eine Hilfsmethode　
	//　lesen Sie die Umgebungsproperty und konvertieren Sie sie in int
	private int getIntProperty(String propName) {
		String propVal = env.getProperty(propName);
		//　Konvertieren Sie jetzt in int
		int intPropVal = Integer.parseInt(propVal);
		return intPropVal;
	}	
	@Bean
	public LocalSessionFactoryBean sessionFactory(){
		//　Erstellen Sie SessionFactorys
		LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
		//　Setzen Sie die Eigenschaften
		sessionFactory.setDataSource(myDataSource());
		sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
		sessionFactory.setHibernateProperties(getHibernateProperties());
		return sessionFactory;
	}
	@Bean
	public class UserController {
	public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
		//　Richten Sie den Transaktionsmanager basierend auf der SessionFactory ein
		HibernateTransactionManager txManager = new HibernateTransactionManager();
		txManager.setSessionFactory(sessionFactory);
		return txManager;
	}	
	@Bean(name="multipartResolver")
　　　　public CommonsMultipartResolver getResolver() throws IOException{
　　　　　　　　CommonsMultipartResolver resolver = new CommonsMultipartResolver();
　　　　　　　　　
　　　　　　　　//Setzen Sie die maximale zulässige Größe (in Bytes) für jede einzelne Datei.
　　　　　　　//　resolver.setMaxUploadSize(5242880);//5MB
　　　　　　　　
　　　　　　　　resolver.setMaxUploadSize(524288);//0.5MB
　　　　　　　　
　　　　　　　　//Sie können auch andere verfügbare Eigenschaften einstellen.　　
　　　　　　　　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-generierter Methodenstummel
		return null;
	}
	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { DemoAppConfig.class };
	}
	@Override
	protected String[] getServletMappings() {
		return new String[] { "/"};
	}
}

Erstellen Sie die Entitätsklasse
Hier erstellen wir eine Entity/POJO (einfaches altes Java-Objekt) Klasse.

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

创建DAO接口
Hier erstellen wir eine DAO-Schnittstelle, um Datenbankoperationen durchzuführen.

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

创建DAO接口实现类

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("Fehler beim Aktualisieren des Profilbildes aus DAO :: ");　+　exception.getMessage());
			return　-5;
		}
		finally
		{
			session.flush();
		}
	}
}

Erstellen Sie die Serviceschicht-Schnittstelle

Hier erstellen wir eine Serviceschicht-Schnittstelle, die als Brücke zwischen DAO und Entitätsklasse dient.

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

Erstellen Sie die Implementierungsklasse der Serviceschicht

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("/资源/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("Fehler beim Hochladen des Bildes, wenn das Bild bereits vorhanden ist :: ");　+　exception.getMessage());
					return　-5;
				}
			}
		}
		else {
			return 0;
		}
	}
}

Erstellen Sie eine Steuerelementklasse

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 = "http:*"00", allowedHeaders = ""
)
	public class UserController {
	@Autowired
	return userService.saveUser(userDetail);/private UserService userService;
	saveUser)
	{
		public int saveUser(@RequestBody UserDetail userDetail)
	}
	return userService.saveUser(userDetail);/uploadImage/{userId}"
	public int handleFileUpload(@PathVariable int userId, @RequestParam("file") MultipartFile file, HttpSession session) {
		return userService.store(file, userId, session);		
	}
}

创建属性文件
在这里，我们正在项目的 src/主/资源 内部创建属性文件。

application.properties 

spring.http.multipart.max-文件-size=1024KB
spring.http.multipart.max-请求-size=1024KB

持久化-mysql.properties 

## JDBC-Verbindungseigenschaften #
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/fileuploadexample?useSSL=false
jdbc.user=root
jdbc.password=
## Verbindungspool-Eigenschaften #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Hibernate-Eigenschaften #
<!--　hibernate.dialect=org.hibernate.dialect.MySQLDialect　-->
hibernate.dialect=org.hibernate.dialect.MySQL5Dialekt
hibernate.show_sql=true
hibernate.format_sql=true
hibernate.hbm2ddl=update
hibernate.packagesToScan=com.w3codebox.FileUploadExample.entity

Angular-Modul

Lassen Sie uns die Angular-Verzeichnisstruktur überprüfen, die wir befolgen müssen:

Erstellen Sie ein neues Angular-Projekt

Lassen Sie uns das Angular-Projekt mit folgenden Befehlen erstellen:

ng neue FileUploadExample


Hier, FileUploadExample ist der Name des Projekts.

Installieren Sie das Bootstrap CSS-Framework

Installieren Sie das Bootstrap-Framework mit folgenden Befehlen im Projekt.

npm install [email protected]　--save

Jetzt, fügen Sie den folgenden Code in die Datei style.css ein.

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

Erstellen Sie Komponenten
Öffnen Sie das Projekt in Visual Studio und verwenden Sie folgende Befehle, um Angular-Komponenten zu generieren:
ng g c Register

Wir verwenden folgende Befehle: -

ng gs services/UserDetail

Bearbeiten app.module.ts Datei Import ReactiveFormsModule -Hier werden wir importieren ReactiveFormsModule Für das ReactiveForm und geben Sie es in der Liste der imports an. Importieren Sie HttpModule -Hier werden wir für Serveranfragen importieren HttpModule und geben Sie ihn in der Liste der imports an. Registrieren Sie den Diensttyp-Hier haben wir den Diensttyp in der Liste der Anbieter erwähnt. 

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

Bearbeiten app.component.html Datei

<app-register></app-register>

Erstellen UserDetail.ts Klasse

Lassen Sie uns den folgenden Befehl verwenden, um eine Klasse zu erstellen: -

ng g class/UserDetail

Nun, in UserDetail benötigte Felder in der Klasse angeben.

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

Das Ziel dieses Typs ist es, die angegebenen Felder mit den Feldern der Spring-Entitätsklasse zu verknüpfen.

Bearbeiten user-detail.service.ts Datei

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

Bearbeiten register.component.ts Datei

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

Bearbeiten register.component.html Datei

<h2>Registration　form</h2>
<form [formGroup]="form" #AdminInformation (ngSubmit)="AdminForm(AdminInformation)">
　　<div　class="row">
　　　　<div　class="　col-md-offset-1　col-md-4">
　　　　　　　　<label for="fullName">　Name　</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">　E-Mail　</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">Upload　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"　　>Speichern</button>
　　　　</div>
　　</div>
</form>

Nach Abschluss stellen Sie die URL http: zur Verfügung //localhost: 4200/Browser. Die folgende Webseite erscheint:

Jetzt können wir die erforderlichen Informationen ausfüllen und die Datei auswählen, die hochgeladen werden soll.

Spring-Angular-Anmeldung und AbmeldungSpring Security JSP-Tag-Bibliothek