如何用ng-zorro 的upload组件 与 msf4j 的合作实现文件上传

这篇文章主要介绍“如何用ng-zorro 的upload组件 与 msf4j 的合作实现文件上传”，在日常操作中，相信很多人在如何用ng-zorro 的upload组件 与 msf4j 的合作实现文件上传问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用ng-zorro 的upload组件 与 msf4j 的合作实现文件上传”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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. 前端内容

<nz-upload    nzAction="http://localhost:8888/uploadFile"    nzListType="picture-card"    nzName="files"    [(nzFileList)]="picUploadList"    [nzShowButton]="picUploadList.length < 3"    [nzShowUploadList]="showUploadList"    [nzRemove]="deleteFile"    [nzPreview]="handlePreview">    <i nz-icon nzType="plus"></i>       <div class="ant-upload-text">上传</div> </nz-upload> <nz-modal      [nzVisible]="previewVisible"      [nzContent]="modalContent"       [nzFooter]="null"       (nzOnCancel)="previewVisible = false">   <ng-template #modalContent>       <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />    </ng-template> </nz-modal>

根据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<File> 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中等等。

到此，关于“如何用ng-zorro 的upload组件 与 msf4j 的合作实现文件上传”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！