如何用ng-zorro 的upload組件 與 msf4j 的合作實(shí)現(xiàn)文件上傳

這篇文章主要介紹“如何用ng-zorro 的upload組件 與 msf4j 的合作實(shí)現(xiàn)文件上傳”，在日常操作中，相信很多人在如何用ng-zorro 的upload組件 與 msf4j 的合作實(shí)現(xiàn)文件上傳問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何用ng-zorro 的upload組件 與 msf4j 的合作實(shí)現(xiàn)文件上傳”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

1. 準(zhǔn)備工作

ng-zorro的upload組件可以實(shí)現(xiàn)文件上傳，當(dāng)然還有其他的組件可以實(shí)現(xiàn)同樣的功能，這里就不討論其他的了。

msf4j是java的一個(gè)微服務(wù)框架，這里使用它來實(shí)現(xiàn)后端上傳。

angular：>= 7.2.0

node >= 10.15.3

ng-zorro >= 8.0.1

java >= 1.8

msf4j = 2.1.0

2. 前端內(nèi)容

<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>

根據(jù)ng-zorro的官方文檔可以得知，nzAction是用來配置上傳地址的，配置好之后可以自動(dòng)上傳，不用自己寫什么上傳的方法，當(dāng)然也可以配置為手動(dòng)上傳，這里的寫法跟官方文檔是一致的，其它參數(shù)的詳細(xì)解釋可以去看看官方文檔。 ts中的寫法也和官方一致。

3.msf4j

@Path("/file")
public class RecordApi {

    private static Logger logger = LoggerFactory.getLogger(RecordApi.class);
    // 設(shè)置文件下載地址
    private static String MOUNT_PATH = "/Users/moon/Downloads/test/";

    public RecordApi() {
        if (OSUtil.isWindowsOS()) {
            MOUNT_PATH = "d:\\";
        }
    }


    /**
     * 文件上傳
     * @param files 文件集合，使用的是nz-upload 組件，以 multipart/form-data 格式上傳，對(duì)應(yīng)的files 是組件中的 nzName 的值
     *              如果文件已經(jīng)存在則會(huì)覆蓋原有文件
     * @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();
    }

}

寫完之后啟動(dòng)msf4j的微服務(wù)，就可以實(shí)現(xiàn)文件的上傳和下載，前端不能直接訪問后臺(tái)，需要走代理，angular本身是可以支持配置代理的，代理的配置可以參考這個(gè)文章。

4. 其它

需要注意的是：

1. nz-upload是使用multipart/form-data的格式來傳遞數(shù)據(jù)，是鍵值對(duì)也就是key-value的形式，所以在msf4j的接口中需要配置一個(gè)key值，而這個(gè)key值就是nz-upload組件中的nzName這個(gè)值，這樣在后端代碼中就能通過key獲取到文件信息

2. msf4j中接收到的文件是數(shù)組格式，大概是這樣的：

{
  "files": [ file1, file2, file3 ...... ]
}

所以可以通過遍歷文件對(duì)象，將文件復(fù)制到其他位置，比如可以轉(zhuǎn)存到hdfs中等等。

到此，關(guān)于“如何用ng-zorro 的upload組件 與 msf4j 的合作實(shí)現(xiàn)文件上傳”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！