用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/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});
}
app.component.html
{{title}}
Select files
Multiple
Single
Upload queue
Queue length: {{ uploader?.queue?.length }}
Name
Size
Progress
Status
Actions
{{ item?.file?.name }}
{{ item?.file?.size/1024/1024 | number:'.2' }} MB
OK
Cancel
Error
Queue progress:
编译打包
使用下面的命令就可以产生编译打包好的前端：
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 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();
}
}
总结：
我们用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';------WebKitFormBoundaryQ8K9wTfL0BIB6BTG
Content-Disposition: form-data; name="file"; filename="a.pptx"
Content-Type: application/vnd.openxmlformats-officedocument.presentationml.presentation
------WebKitFormBoundaryQ8K9wTfL0BIB6BTG--