angular2 如何与java_Angular2：使用NG-ZORRO的upload组件对接JAVA后端实现上传

环境

angular/cli：1.7.4

node：v8.11.2

ng-zorro：0.7

后端使用spring-boot做一个上传文件的接口，前端工程上传文件的时候对接后端的接口就可以了。下面说一下怎么使用。

新建一个Spring Boot的工程

填写maven信息

选好web，然后下一步，finish，等待jar包下载完成

新建完成，下载好jar包，项目结构应该是这样的。

启动一下，没什么问题开始编写后端上传文件的代码

这里就不搞什么三层架构了，就一个上传文件，直接在web包下新建一个类FileUploadController

package com.lautumn.web;

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 java.io.File;

import java.io.IOException;

import java.util.Date;

import java.util.HashMap;

import java.util.Map;

@RestController

public class FileUploadController {

@RequestMapping("/upload")

public Map upload(@RequestParam("upload_file")MultipartFile file) {

String path = "/Users/lautumn/JAVALEARN/web/upload"; // 文件保存路径

/**

* 可能会出现重复文件，所以我们要对文件进行一个重命名的操作

* 截取文件的原始名称，然后将扩展名和文件名分开，使用：时间戳-文件名.扩展名的格式保存

*/

// 获取文件名称

String fileName = file.getOriginalFilename();

// 获取扩展名

String fileExtensionName = fileName.substring(fileName.lastIndexOf(".") + 1);

// 获取文件名

String name = fileName.substring(0, fileName.lastIndexOf("."));

// 生成最终保存的文件名,格式为: 时间戳-文件名.扩展名

String id = String.valueOf(new Date().getTime());

String saveFileName = id + "-" + name + "." + fileExtensionName;

/**

* 上传操作：可能upload目录不存在，所以先判断一下如果不存在，那么新建这个目录

*/

File fileDir = new File(path);

if (!fileDir.exists()){

fileDir.setWritable(true);

fileDir.mkdirs();

}

/**

* 上传

*/

File targetFile = new File(path, saveFileName);

try {

file.transferTo(targetFile);

} catch (IOException e) {

e.printStackTrace();

}

/**

* 返回值，这三个对象是ng-zorro那边需要的

*/

Map result = new HashMap<>();

result.put("url", String.format("http://localhost:8080/upload/%s", saveFileName));

result.put("uid", id);

result.put("name", fileName);

return result;

}

}

说明：注释都有，如果不知道上传路径怎么写就在项目目录下右键copy一下路径填上就好了。

image.png

然后在resource/static 下新建一个index.html 测试一下上传是否成功。

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

上传

启动项目访问localhost:8080/index.html

image.png

选择一个文件然后点击上传

文件也静静的躺在它该在的地方

这时候点击链接是访问不到的，因为还没有配置静态资源访问路径。

配置application.yml

这时候重启项目再次上传文件的操作，点击返回的url应该可以了。

这里还有一个问题，因为我们是前后端分离的，待会前端项目启动端口肯定不能和后端的一样，所以会有跨域的问题，

添加上这个注解就可以了

那么接下来是前端的事情，这里就不详细说搭建项目过程了，这里采用的NG-ZORRO的版本是0.7x,给个官网链接，按照官网示例搭建项目https://ng.ant.design/version/0.7.x/docs/getting-started/zh。

拷贝一段ng-zorro的uoload示例

app.component.ts

import { Component } from '@angular/core';

import {NzMessageService, UploadFile} from 'ng-zorro-antd';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

fileList = [

{

uid: -1,

name: 'xxx.png',

status: 'done',

url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'

}

];

previewImage = '';

previewVisible = false;

constructor(private msg: NzMessageService) {}

handlePreview = (file: UploadFile) => {

this.previewImage = file.url || file.thumbUrl;

this.previewVisible = true;

}

}

app.component.html

nzAction="https://jsonplaceholder.typicode.com/posts/"

nzListType="picture-card"

[(nzFileList)]="fileList"

[nzShowButton]="fileList.length < 3"

[nzPreview]="handlePreview">

Upload

启动angular工程，页面展示

image.png

这时候对接我们写的后端上传文件了。

首先在app.component.html里将nzAction修改为我们写的后端地址

image.png

这时候问题来了，我们后端的上传逻辑需要传一个名字为upload_file的参数，这个要怎么办呢？

查看官网得知，可以使用nzName来指定上传文件的参数

image.png

这时候两个项目启动起来，测试上传

第二张是我上传的，控制台也没报什么错误

这里有一个问题，有时候点击上传的时候会出现文件上传中，但是缩略图没出来

image.png

查看后台发现文件已经到后台了，这时候可以点击一下其他图片的预览，或者点击一下上传的按钮再关闭试试

image.png

图片就出来了

具体原因我也不太清楚，但是在后端工程中上传的时候睡眠1秒左右，或者在Chrome浏览器的网速调整至3g就可以保证每次都会出预览图，我觉得可能是本地开发中上传文件速度太快还是怎么样，没能检测到吧。如果有哪位知道真实原因麻烦告知一下，以及解决办法，毕竟上传文件的时候睡眠一秒，不是很合理，如果是在真实线上环境应该没问题吧，可能原因还是上传的速度太快没检测到，如果在真实线上环境，有网络的延迟应该是可以每次都出预览图的。具体我没有试验过。仅猜测。有解决方法的还请告知我一声，感激。

以上就完成了。