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

Springチュートリアル

Spring Angular ファイルアップロード

このセクションでは、File Upload Webアプリケーションを作成します。このアプリケーションには登録フォームがあります。この統合では、Springを使用してバックエンド部分を処理し、Angularを使用してフロントエンド部分を処理します。

作業アプリケーション

アプリケーションをサーバーにデプロイすると、登録ページが生成されます。 ユーザーは必要な情報を入力し、画像をアップロードすることができます。 画像のサイズは、以下を超えないことを忘れないでください。1 MB。

使用するツール

SpringとHibernateプロジェクトを開発するためにどんなIDEでも使用できます。それはMyEclipseかもしれません。/Eclipse/NetBeans。ここでは、Eclipseを使用しています。 データベース用のMySQL。 Angularプロジェクトを開発するためにどんなIDEでも使用できます。それはVisual Studioコードかもしれません。/素晴らしい。ここでは、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>
	<!--　Add　Jackson　for　JSON　converters　-->
	<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>
	<!--　to　compensate　for　java　9　not　including　jaxb　-->
	<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ではなく、そのためには2つのクラスを作成し、必要な設定を指定します。

DemoAppConfig.java 

package com.w;3codebox.FileUploadExample.config;
import java.beans.PropertyVetoException;
import java.io.IOException;
import java.util.Properties;
import javax.sql.DataSource;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.env.Environment;
import org.springframework.orm.hibernate;5.HibernateTransactionManager;
import org.springframework.orm.hibernate;5.LocalSessionFactoryBean;
import org.springframework.transaction.annotation.EnableTransactionManagement;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import com.mchange.v2.c3p0.ComboPooledDataSource;
@Configuration
@EnableWebMvc
@EnableTransactionManagement
@ComponentScan("com.w3codebox.FileUploadExample")
@PropertySource(value = { "classpath:persistence-mysql.properties" })
@PropertySource(value = { "classpath:persistence-mysql.properties" })
@PropertySource(value = { "classpath:application.properties" })
public class DemoAppConfig implements WebMvcConfigurer {
	@Autowired
	private Environment env;
	@Bean
	public DataSource myDataSource() {
		//　接続プールを作成します
		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"));
		//　set　connection　pool　props
		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()　{
		//　set　hibernate　properties
		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);
		//　現在の値をintに変換します
		int intPropVal = Integer.parseInt(propVal);
		return intPropVal;
	}	
	@Bean
	public LocalSessionFactoryBean sessionFactory(){
		//　session factoryを作成します
		LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
		//　プロパティを設定します
		sessionFactory.setDataSource(myDataSource());
		sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
		sessionFactory.setHibernateProperties(getHibernateProperties());
		return sessionFactory;
	}
	@Bean
	@Autowired
	public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
		//　session factoryに基づいてトランザクションマネージャーを設定します。
		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.w;3codebox.FileUploadExample.config;
import　org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
public　class　MySpringMvcDispatcherServletInitializer　extends　AbstractAnnotationConfigDispatcherServletInitializer　{
	@Override
	protected　Class<?>[]　getRootConfigClasses()　{
		//　未了処理　自動-生成されたメソッドスタブ
		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.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 

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 

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("DAOからプロファイル画像を更新中にエラーが発生しました :: ");　+　exception.getMessage());
			return　-5;
		}
		finally
		{
			session.flush();
		}
	}
}

サービスレイヤインターフェースの作成

ここでは、サービスレイヤインターフェースの作成を行っており、DAOとエンティティクラスの間の橋渡し役となります。

UserService.java 

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

サービスレイヤ実装クラスの作成

UserServiceImpl.java 

package com.w;3codebox.FileUploadExample.service.implementation;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import javax.servlet.http.HttpSession;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import com.w3codebox.FileUploadExample.DAO.interfaces.UserDAO;
import com.w3codebox.FileUploadExample.entity.UserDetail;
import com.w3codebox.FileUploadExample.service.interfaces.UserService;
@Service("userService")
public class UserServiceImpl implements UserService {
	@Autowired
	private UserDAO userDAO;
	@Transactional
	public int saveUser(UserDetail userDetail) {
		return userDAO.saveUser(userDetail);
	}
	@Transactional
	public UserDetail getUserDetail(int userId) {
		return userDAO.getUserDetail(userId);
	}
	@Transactional
	public int store(MultipartFile file, int userID, HttpSession session) {
		Path rootLocation = Paths.get(session.getServletContext().getRealPath("/resources/images");
		System.out.println("rootLocation == ")　+　rootLocation);
		UserDetail userDetail = this.getUserDetail(userID);
		　
		　String nameExtension[] = file.getContentType().split("/");
		　String profileImage = userID　+　"."　+　nameExtension[1];
		　	
		　System.out.println("ProfileImage :: ")　+　profileImage);
		　
		　if(userDetail.getUserId() > 0)
		　{
			　
			if(userDetail.getProfileImage() == null || userDetail.getProfileImage() == " " || userDetail.getProfileImage() == "")
			{
				try
				{
					Files.copy(file.getInputStream(), rootLocation.resolve(profileImage));
					int result = userDAO.updateProfileImage(profileImage, userID);	
					if(result > 0)
						return result;
					else
						return　-5;
				}
				catch(Exception exception)
				{
					System.out.println("画像アップロード中にエラー発生 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("画像が既に存在する場合の画像アップロードエラー:: ");　+　exception.getMessage());
					return　-5;
				}
			}
		}
		else {
			return 0;
		}
	}
}

クラスを作成します

UserController.java 

package com.w;3codebox.FileUploadExample.restController;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.w3codebox.FileUploadExample.entity.UserDetail;
import com.w3codebox.FileUploadExample.service.interfaces.UserService;
@RestController
@RequestMapping("/api"
@CrossOrigin(origins = ",http://localhost:42"00", allowedHeaders = \*")
public class UserController {
	@Autowired
	private UserService userService;
	@PostMapping("/saveUser)
	public int saveUser(@RequestBody UserDetail userDetail)
	{
		return userService.saveUser(userDetail);
	}
	@PostMapping("/uploadImage/{userId}"
	public int handleFileUpload(@PathVariable int userId, @RequestParam("file") MultipartFile file, HttpSession session) {
		return userService.store(file, userId, session);		
	}
}

属性ファイルの作成
ここでは、プロジェクトの src/main/resources 内部で属性ファイルを作成します。

application.properties 

spring.http.multipart.max-ファイル-size=1024KB
spring.http.multipart.max-请求-size=1024KB

持久化-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 properties #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Hibernate properties #
<!--　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新しいFileUploadExample


ここでは、 FileUploadExample プロジェクトの名前です。

Bootstrap CSSフレームワークをインストール

以下のコマンドを使用してプロジェクトにガイドをインストールします。

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　fie　details");
　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　err　=>　{
　　　　　　　　　　　　　　　　　　　　　　alert("error　while　uploading　fie　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">　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">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"　　>Save</button>
　　　　</div>
　　</div>
</form>

完了後、次のURLをウェブサイトで提供してください http: //localhost: 4200/ブラウザで次のウェブページが表示されます:

今、必要な情報を入力し、アップロードする必要があるファイルを選択することができます。

SpringAngularログインとログアウトSpringSecurityJSPタグライブラリ