用Spring Boot & Angular2快速开发文件上传服务

最新推荐文章于 2024-08-24 08:57:28 发布

cuiwader

最新推荐文章于 2024-08-24 08:57:28 发布

阅读量8.3k

点赞数 4

分类专栏：技术 spring angular2 文章标签： angular2 spring

本文链接：https://blog.csdn.net/cuiwader/article/details/53127961

版权

本文介绍了如何使用Spring Boot和Angular2快速开发一个文件上传服务。通过建立Angular2项目，实现上传组件，并结合Spring Boot构建后端服务，实现了文件上传功能。详细步骤包括Angular2项目的创建、组件的编写以及Spring Boot项目的建立。

摘要由CSDN通过智能技术生成

序

文件上传可以作为一个独立的微服务。用Spring Boot和Angular2开发这样的服务非常有优势，可以用最少的代码，实现非常强的功能。如果比了解Spring Boot和Angular2的，请先看这几个文章：

用Spring Boot & Cloud，Angular2快速搭建微服务web应用 - 实现RESTful CRUD

用Spring Boot & Cloud，Angular2快速搭建微服务web应用 - AngularJS2客户端

用Spring Boot & Cloud，Angular2快速搭建微服务web应用 - 增加代理服务器

用Spring Boot & Cloud，Angular2快速搭建微服务web应用 - 增加权限控制

Angular2文件上传组件

Angular2带来了全新的组件模型。如果你熟悉面向对象这个编程语言范式，就会发现这个新的组件模型和面向对象非常接近。我在学习到Angular2的组件模型的时候非常的激动，因为我觉得这是对前端开发模型的一个革命，就像C++语言之于汇编语言。它的好处显而易见，使用组件对代码基本上没有侵入性，容易写出高内聚松耦合的代码，等等。

言归正传，Angular2的文件上传组件我使用了这个：https://github.com/valor-software/ng2-file-upload/，然后简化了它的官方示例。下面是开发的步骤。

建立Angular2项目

在node环境中，先安装Angular2的CLI：

npm install -g angular-cli

用CLI的好处是，几个简单的命令就可以初始化Angular2项目，并且会自动生成相应的文件，不用自己手写了，另外打包发布也非常方便。用下面的命令建立uploader-client项目：

ng new uploader-client

之后进入uploader-client目录，可以看到项目的相关文件都生成好了，我们可以直接开发业务代码了。具体请参考官网： https://github.com/angular/angular-cli

实现上传功能

进入uploader-client/src/app，下面app打头的文件我们需要修改一下：

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { FileUploadModule } from 'ng2-file-upload';

@NgModule({
  declarations: [