1. 准备工作
ng-zorro的upload组件可以实现文件上传，当然还有其他的组件可以实现同样的功能，这里就不讨论其他的了。
msf4j是java的一个微服务框架，这里使用它来实现后端上传。
angular：>= 7.2.0
node >= 10.15.3
ng-zorro >= 8.0.1
java >= 1.8
msf4j = 2.1.0
2. 前端内容
上传
![]()
根据ng-zorro的官方文档可以得知，nzAction是用来配置上传地址的，配置好之后可以自动上传，不用自己写什么上传的方法，当然也可以配置为手动上传，这里的写法跟官方文档是一致的，其它参数的详细解释可以去看看官方文档。 ts中的写法也和官方一致。
3.msf4j
@Path("/file")
public class RecordApi {
private static Logger logger = LoggerFactory.getLogger(RecordApi.class);
// 设置文件下载地址
private static String MOUNT_PATH = "/Users/moon/Downloads/test/";
public RecordApi() {
if (OSUtil.isWindowsOS()) {
MOUNT_PATH = "d:\\";
}
}
/**
* 文件上传
* @param files 文件集合，使用的是nz-upload 组件，以 multipart/form-data 格式上传，对应的files 是组件中的 nzName 的值
* 如果文件已经存在则会覆盖原有文件
* @return
* @throws SVSException 抛出自定义异常
*/
@Path("/uploadFile")
@POST
public Response uploadFile(@FormDataParam("files") List files) throws Exception {
files.forEach(f -> {
try {
File file = new File(MOUNT_PATH, f.getName());
if (file.exists()) {
file.delete();
}
Files.copy(f.toPath(), Paths.get(MOUNT_PATH, f.getName()));
} catch (IOException e) {
logger.error("Error while Copying the file " + e.getMessage(), e);
throw new RuntimeException("文件上传异常");
}
});
return Response.ok().build();
}
/**
* 文件下载
* @param fileName 文件名，带后缀，比如：gyy.jpg
* @return
*/
@Path("/downloadFile/{fileName}")
@GET
public Response downloadFile(@PathParam("fileName") String fileName) {
File file = Paths.get(MOUNT_PATH, fileName).toFile();
if (file.exists()) {
return Response.ok(file).build();
}
return Response.ok().build();
}
/**
* 删除文件
* @param fileName 文件名，带后缀，比如：gyy.jpg
* @return
*/
@Path("/deleteFile/{fileName}")
@DELETE
public Response deleteFile(@PathParam("fileName") String fileName) {
File file = new File(MOUNT_PATH, fileName);
if (!file.exists()) {
return Response.ok().build();
}
return Response.ok(file.delete()).build();
}
} 写完之后启动msf4j的微服务，就可以实现文件的上传和下载，前端不能直接访问后台，需要走代理，angular本身是可以支持配置代理的，代理的配置可以参考这个文章。
4. 其它
需要注意的是：
1. nz-upload是使用multipart/form-data的格式来传递数据，是键值对也就是key-value的形式，所以在msf4j的接口中需要配置一个key值，而这个key值就是nz-upload组件中的nzName这个值，这样在后端代码中就能通过key获取到文件信息
2. msf4j中接收到的文件是数组格式，大概是这样的：
{
"files": [ file1, file2, file3 ...... ]
}所以可以通过遍历文件对象，将文件复制到其他位置，比如可以转存到hdfs中等等。
参考资料：
Angular2：使用NG-ZORRO的upload组件对接JAVA后端实现上传
MSF4J FormParam Support