用Spring Boot & Angular2快速开发文件上传服务
序
文件上传可以作为一个独立的微服务。用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: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
FileUploadModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
该文件导入了文件上传组件（FileUploadModule），因此修改的代码总共有2行，其它代码都是自动生成的。增加的行用绿底色标出。
app.component.ts:
import { Component } from '@angular/core';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
public url:string = 'http://localhost:8080';
public uploader:FileUploader = new FileUploader({url: this.url});
}
这个文件添加了3行代码，其它也是自动生成的。增加的行也很简单，就是添加了一个名字叫做uploader的属性，是FileUploader的实例。
app.component.html
<h1>
{{title}}
</h1>
<div>
<h3>Select files</h3>
Multiple
<input type="file" ng2FileSelect [uploader]="uploader" multiple ><br/>
Single
<input type="file" ng2FileSelect [uploader]="uploader" />
<h3>Upload queue</h3>
<p>Queue length: {{ uploader?.queue?.length }}</p>
<table class="table">
<thead>
<tr>
<th width="30%">Name</th>
<th width="5%">Size</th>
<th width="20%">Progress</th>
<th width="20%">Status</th>
<th width="25%">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of uploader.queue">
<td><strong>{{ item?.file?.name }}</strong></td>
<td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
<td *ngIf="uploader.isHTML5">
<div [ngStyle]="{ 'width': item.progress + '%' }"></div>
</td>
<td>
<span *ngIf="item.isSuccess">OK</span>
<span *ngIf="item.isCancel">Cancel</span>
<span *ngIf="item.isError">Error</span>
</td>
<td>
<button type="button" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
Upload
</button>
<button type="button" (click)="item.cancel()" [disabled]="!item.isUploading">
Cancel
</button>
<button type="button" (click)="item.remove()">
Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
Queue progress:
<div [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
<button type="button" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
Upload all
</button>
<button type="button" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
Cancel all
</button>
<button type="button" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
Remove all
</button>
</div>
</div>这个文件增加了65行，稍微复杂了一点，不过提供了单文件上传，多文件上传，文件队列管理，上传取消等很多功能，甚至还有根据文件的不同状态去设置按钮的状态。我觉得这里面充分体现了Angular2组件模型的威力。其中最关键的代码是Multiple和Single下面的input标签，将选择的文件跟uploader绑定了起来。之后就是利用uploader组件的功能了。
编译打包
使用下面的命令就可以产生编译打包好的前端：
ng build这样生成的是开发环境的包。参数--proc可以生成生产环境的包。运行该命令之后，会在uploader-client目录下面生成一个dist目录，里面有index.html，以及inline.js，main.bundle.js和styles.bundle.js。这就是前端需要的所以文件了。将这些生成的文件（还有.map文件帮助调试）一起拷贝到下面要讲到的uploader-server/src/main/resources/static下面。或者可以修改uploader-client/angular-cli.json，将dist改为该目录的相对路径。这样ng build之后就不需要拷贝了。
建立Spring Boot项目
还是去 http://start.spring.io/，创建一个项目模板，在Dependencies中增加Web和Configuration Processor。之后拷贝Spring官方的文件上传示例： https://spring.io/guides/gs/uploading-files/，将示例里面所有java文件拷贝过来。修改其中的一个文件：
package com.shdanyan;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.Resource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import com.shdanyan.storage.StorageFileNotFoundException;
import com.shdanyan.storage.StorageService;
@Controller
public class FileUploadController {
private final StorageService storageService;
@Autowired
public FileUploadController(StorageService storageService) {
this.storageService = storageService;
}
/*
* @GetMapping("/") public String listUploadedFiles(Model model) throws
* IOException {
*
* model.addAttribute("files", storageService .loadAll() .map(path ->
* MvcUriComponentsBuilder .fromMethodName(FileUploadController.class,
* "serveFile", path.getFileName().toString()) .build().toString())
* .collect(Collectors.toList()));
*
* return "uploadForm"; }
*/
@GetMapping("/")
public String index() {
return "forward:index.html";
}
@GetMapping("/files/{filename:.+}")
@ResponseBody
public ResponseEntity<Resource> serveFile(@PathVariable String filename) {
Resource file = storageService.loadAsResource(filename);
return ResponseEntity
.ok()
.header(HttpHeaders.CONTENT_DISPOSITION,
"attachment; filename=\"" + file.getFilename() + "\"")
.body(file);
}
@PostMapping("/")
public String handleFileUpload(@RequestParam("file") MultipartFile file,
RedirectAttributes redirectAttributes) {
storageService.store(file);
redirectAttributes.addFlashAttribute("message",
"You successfully uploaded " + file.getOriginalFilename()
+ "!");
return "redirect:/";
}
@ExceptionHandler(StorageFileNotFoundException.class)
public ResponseEntity<?> handleStorageFileNotFound(
StorageFileNotFoundException exc) {
return ResponseEntity.notFound().build();
}
}
修改的页面用绿底色显示出来，即将原来的页面替换成了我们的Angular2的页面，总共是3行代码。这样一个完整的上传功能就实现了。上传的关键代码是Controller里面响应POST请求的方法handleFileUpload。用spring-boot:run就可以运行了，然后在浏览器中打开链接http://localhost:8080就可以看到上传的网页了。
总结：
我们用100行不到的代码，就实现了功能完善的文件上传功能。完整的代码可以在这里下载：https://github.com/cuiwader/file-uploader。那么您是否认同Spring Boot和Angular2的强大功能呢？欢迎留言。另外里面的一个技术细节，ng2-file-upload使用了HTML5的一些新特性，通过XMLHttpRequest（XHR）API完成了文件上传和进度查询功能。从它源代码里面的这一行也可以看出，它似乎还能工作在不支持HTML5的浏览器中，我没有测试过。
let transport = this.options.isHTML5 ? '_xhrTransport' : '_iframeTransport';在上传文件的时候，可以看到HTTP请求包含了这个头：Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryQ8K9wTfL0BIB6BTG。后面的boundary是分隔。在其后的Request Payload里面，可以看到该分隔被使用：
------WebKitFormBoundaryQ8K9wTfL0BIB6BTG Content-Disposition: form-data; name="file"; filename="a.pptx" Content-Type: application/vnd.openxmlformats-officedocument.presentationml.presentation ------WebKitFormBoundaryQ8K9wTfL0BIB6BTG--第一个分隔Content-Type表明传送的是一个office的PPT文件。第二个分隔后面就是文件的内容，但是没有显示出来。我猜测应该是用二进制传输的，multipart/form-data是支持二进制传输的，如果转换为base64，则会有一个Content-Transfer-Encoding指明用了base64编码，现在没有指明。另外Content-Type实际上指明了这是一个二进制文件，所以是直接二进制传输的。同时我们还可以看到，不同的分隔还有CR+LF。