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

Учебник Spring

Загрузка файлов Spring Angular

В этом разделе мы создадим веб-приложение для загрузки файлов. Это приложение включает в себя форму регистрации. В этой интеграции мы используем Spring для обработки части бэкенда, а Angular для обработки части фронта.

Рабочее приложение

Как только мы разместим приложение на сервере, будет создана страница регистрации. Пользователи могут заполнить необходимые данные и загрузить изображение. Помните, что размер изображения не должен превышать 1 МБ.

Инструменты, которые будут использоваться

Используйте любую IDE для разработки проектов Spring и Hibernate. Это может быть MyEclipse/Eclipse/Netbeans. Здесь мы используем Eclipse. Для базы данных используется MySQL. Используйте любую IDE для разработки проекта Angular. Это может быть Visual Studio Code/Sublime. Здесь мы используем Visual Studio Code. Сервер: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Используемые нами технологии

Здесь мы используем следующие технологии:

Spring5 Hibernate5 Angular6 MYSQL

Создание базы данных

Давайте создадим базу данных fileuploadexample Не нужно создавать таблицы, так как Hibernate автоматически создаст их.

Модуль Spring

Давайте посмотрим на структуру каталогов Spring, которой мы должны следовать:

Чтобы разработать приложение для загрузки файлов, выполните следующие шаги: -

Добавьте зависимости в файл 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>
	<!-- Добавить Jackson для 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>
	<!-- для компенсации отсутствия jaxb в java 9 -->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-api</artifactId>
		<version>2.3.0</version>
	</dependency>
　	
　	<!-- JUnit dependency -->
　　　　<dependency>
　　　　　　　　<groupId>junit</groupId>
　　　　　　　　<artifactId>junit</artifactId>
　　　　　　　　<version>3.8.1</version>
　　　　　　　　<scope>test</scope>
　　　　</dependency>
　　　　
　　　　　　　　　<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
	<dependency>
	　　　　<groupId>commons-fileupload</groupId>
	　　　　<artifactId>commons-fileupload</artifactId>
	　　　　<version>1.3</version>
	</dependency>
	<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2 -->
	<dependency>
	　　　　<groupId>org.apache.commons</groupId>
	　　　　<artifactId>commons-dbcp2</artifactId>
	　　　　<version>2.0</version>
	</dependency>　
　　　　
　　　　
　　　　
　　</dependencies>
　　<build>
　　　　<finalName>FileUploadExample</finalName>
　　</build>
</project>

Создание конфигурационного класса
Мы выполняем конфигурацию на основе комментариев, а не XML. Поэтому мы создаем два класса и указываем в них необходимую конфигурацию.

DemoAppConfig.java 

package com.w3codebox.FileUploadExample.config;
import java.beans.PropertyVetoException;
import java.io.IOException;
import java.util.Properties;
import javax.sql.DataSource;
import org.hibernate.SessionFactory;
импорт 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() {
		// создать пул подключений
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		// установить jdbc драйвер
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			throw new RuntimeException(exc);
		}
		// установить свойства подключения к базе данных
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		// установить свойства пула подключения
		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() {
		// установить свойства 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) {
		// настроить менеджер транзакций на основе сессии
		HibernateTransactionManager txManager = new HibernateTransactionManager();
		txManager.setSessionFactory(sessionFactory);
		return txManager;
	}	
	@Bean(name="multipartResolver")
　　　　public CommonsMultipartResolver getResolver() throws IOException{
　　　　　　　　CommonsMultipartResolver resolver = new CommonsMultipartResolver();
　　　　　　　　　
　　　　　　　　// Установите максимальный размер файла (в байтах) для каждого отдельного файла.
　　　　　　　// resolver.setMaxUploadSize(5242880); // 5MB
　　　　　　　　
　　　　　　　　resolver.setMaxUploadSize(524288); // 0.5MB
　　　　　　　　
　　　　　　　　// Вы также можете установить другие доступные свойства.　　
　　　　　　　　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 Автоматически сгенерированный метод
		return null;
	}
	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { DemoAppConfig.class };
	}
	@Override
	protected String[] getServletMappings() {
		return new String[] { "/" };
	}
}

Создание класса сущности
Здесь мы создадим класс Entity/POJO (обычный старый объект Java).

UserDetail.java 

package com.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
	public String toString() {
		return "UserDetail [userId=" + userId + ", emailId=" + emailId + ", name=" + name + ", profileImage="
				+ 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;
импорт 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);
			возврат 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)
			{
				возврат result;
			}
			else return -5;
		}
		catch(Exception exception)
		{
			System.out.println("Error while updating profileImage from DAO :: " + exception.getMessage());
			возврат -5;
		}
		finally
		{
			session.flush();
		}
	}
}

Создание интерфейса слоя услуг

Здесь мы создаем интерфейс слоя услуг, который служит мостом между DAO и классом сущности.

UserService.java 

package com.w3codebox.FileUploadExample.service.interfaces;
импорт javax.servlet.http.HttpSession;
импорт 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);
}

Создание класса реализации слоя услуг

UserServiceImpl.java 

package com.w3codebox.FileUploadExample.service.implementation;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
импорт javax.servlet.http.HttpSession;
import javax.transaction.Transactional;
импорт org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
импорт 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)
						возврат result;
					else
						возврат -5;
				}
				catch(Exception exception)
				{
					System.out.println("ошибка при загрузке изображения catch:: " + exception.getMessage());
					возврат -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)
						возврат result;
					else
						возврат -5;
				}
				catch(Exception exception)
				{
					System.out.println("Ошибка при загрузке изображения, когда изображение уже существует :: " + exception.getMessage());
					возврат -5;
				}
			}
		}
		else {
			возврат 0;
		}
	}
}

создание класса контроллера

UserController.java 

пакет com.w3codebox.FileUploadExample.restController;
импорт javax.servlet.http.HttpSession;
импорт org.springframework.beans.factory.annotation.Autowired;
импорт org.springframework.web.bind.annotation.CrossOrigin;
импорт org.springframework.web.bind.annotation.PathVariable;
импорт org.springframework.web.bind.annotation.PostMapping;
импорт org.springframework.web.bind.annotation.RequestBody;
импорт org.springframework.web.bind.annotation.RequestMapping;
импорт org.springframework.web.bind.annotation.RequestParam;
импорт org.springframework.web.bind.annotation.RestController;
импорт 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);		
	}
}

созданием файла свойств
Здесь мы работаем над проектом src/main/resources Внутри создается файл свойств.

application.properties 

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

persistence-mysql.properties 

## JDBC connection properties##
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/fileuploadexample?useSSL=false
jdbc.user=root
jdbc.password=
## Свойства пула подключения #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Свойства 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

Модуль Angular

Давайте посмотрим на структуру директории, которую нам нужно соблюдать в Angular:

Создание проекта Angular

Давайте используем следующие команды для создания проекта Angular:

ng new FileUploadExample


Здесь, FileUploadExample Это имя проекта.

Установка CSS-фреймворка Bootstrap

Используйте следующие команды для установки фреймворка Bootstrap в проекте.

npm install [email protected] --save

Теперь в файле style.css включите следующий код.

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

Генерация компонента
Откройте проект в Visual Studio и используйте следующие команды для генерации компонента Angular:
ng g c Register

Мы также через использование следующих команд: -

ng gs services/UserDetail

Редактировать app.module.ts Файл Импортировать ReactiveFormsModule -Здесь, мы будем импортировать ReactiveFormsModule Для реакции и указания его в массиве imports. Импортировать HttpModule -Здесь, мы будем импортировать запросы к серверу 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 { }

Редактировать app.component.html Файл

<app-register></app-register>

создание UserDetail.ts класс

Давайте создадим класс с помощью следующей команды: -

ng g класс class/UserDetail

Теперь, в UserDetail Указанные в классе обязательные поля.

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

Эта цель - маппинг указанных полей к полям实体 класса Spring.

Редактировать user-detail.service.ts Файл

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

Редактировать register.component.ts Файл

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

Редактировать register.component.html Файл

<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">Электронная почта</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">Загрузить изображение</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">Сохранить</button>
　　　　</div>
　　</div>
</form>

После завершения на сайте предоставьте URL http://localhost: 4200/в браузере. Появится следующая веб-страница:

Теперь мы можем заполнить необходимые данные и выбрать файл для загрузки.

Вход и выход из системы Angular SpringБиблиотека тегов JSP Security Spring