如何用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 的合作實現文件上傳”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！