您好,登录后才能下订单哦!
这篇文章主要介绍“如何用ng-zorro 的upload组件 与 msf4j 的合作实现文件上传”,在日常操作中,相信很多人在如何用ng-zorro 的upload组件 与 msf4j 的合作实现文件上传问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何用ng-zorro 的upload组件 与 msf4j 的合作实现文件上传”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
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
<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中的写法也和官方一致。
@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本身是可以支持配置代理的,代理的配置可以参考这个文章。
需要注意的是:
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 的合作实现文件上传”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。