primeng fileUpload 發送表單數據並將文件數組傳遞給服務層

Question

我正在使用 p-fileUpload primeng 組件。 我有一個要求，除了選擇的文件之外，還必須提交表單中的另一個 p-multiselect。 以下是文件上傳的工作代碼。 當我選擇並單擊上傳時，它會上傳文件。 我想將 uploadFileCtr($event) 更改為 uploadFileCtr($event,faqForm.value ) 並在 ts 文件的 uploadFileCtr() 方法中傳遞注釋代碼。 我嘗試將此行添加到 service.ts formdata：

formData.append("faqObj", faqObj);

但是我無法在我的 rest 服務中獲得 object。 我試圖在我的 POST 方法中包含另一個參數： @FormDataParam("faqObj") Faq 。 這給了我錯誤。

我的 coponent.html 看起來像這樣

<form [formGroup]="faqForm" >
    <div class="row">
                <div class="col-sm-4">
                    <p-fileUpload name="myfile[]" multiple="multiple" accept=".xlsx" customUpload="true"
                    (uploadHandler)="uploadFileCtr($event)">
                    </p-fileUpload>
                </div>
                <div class="col-sm-4">
                    <label >Board ID(s) *:</label>
                    <p-multiSelect [options]="boards" formControlName="board" [defaultLabel]="'All Active Boards'" (onChange)="displayBoard($event)"></p-multiSelect> 
                </div> 
                <div class="col-sm-4" *ngIf = "show">
                    <label >Board Title:</label>
                    <input class="pInputFilter pInputTxt" type="text" readonly id="boardname" value={{this.userSelectedBoard}}>  
                </div>
        
    </div>

</form>

uploadFileCtr 的 component.cs 如下

uploadFileCtr(event) { 
      // faqObj.faqBoards =  faqObj.board.map(boardId=>{
      //   let boardObj:Board = new Board();
      //   boardObj.id = boardId; 
      //   return boardObj;
      // });
        for(let file of event.files) {
          this.uploadedFiles.push(file);
        }
        this.faqService.uploadFile(this.uploadedFiles).subscribe( posts =>{
            this.data = posts;
        },
        error => console.log("Error: ", error),
        () => {
            this.errMsg = this.data.error; 
            // this.succMsg = this.data.success;  
            if (this.errMsg) {
                console.log("errMsg: ", this.errMsg);
                this.msgs = [];
                this.msgs.push({severity:'error', summary:'Error Message', detail:this.data.error});                
                this.status = "error";
            } else {
                // this.getCaseDocuments();
                this.msgs = [];
                this.msgs.push({severity:'success', summary:'Success Message', detail:this.data.success});                             
            }
        
        });
        this.faqForm.reset();
    }
    

用於上傳 REST 服務的 Service.ts 是

uploadFile( uploadedFiles: any[]){
    let file: File = null;
    let formData:FormData = new FormData(); 
    if(uploadedFiles != null && uploadedFiles.length > 0){
        file = uploadedFiles[0];
    }      
    if(file != null){
        formData.append("file", file);
        formData.append("fileName", file.name);
    }else{
        formData.append("file", null);            
        formData.append("fileName", "");
    }
    return this.http.post(this.faqServiceURL +"/upload", formData, { 'headers': this.headers });
}

}

@POST
@Path("upload")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces("application/json")
public Response upload(@FormDataParam("file") InputStream is,
                           @FormDataParam("fileName") String fileName){
    logger.info("FaqService - upload");
    System.out.println("upload : "+fileName+"  faqObj : "); 
    ObjectMapper mapper = utilityObj.getMapperObj();
    String jsonInString = "";  ..//////
    
    }

1. 我可以在上傳的同時添加 formobj - 如果可以，怎么做？
2. 如何發送多個文件？ formData.append("文件", 文件); - 這不接受數組

Answer 1

問題 1 - 我可以在上傳的同時添加 formObj - 如果可以，如何添加？

如果你必須在 formData 中發送整個 object 有兩種方式，

1. 字符串化 object formData.append("faqObj", JSON.stringify(faqObj)); 在這種情況下，服務器必須解析字符串化的 object。
2. Another way to do it is to append the keys of the object looping through the object like Object.keys(faqObj).forEach(ele => formData.append(`faqObj[${ele}]`), faqObj[ele])在這種情況下，服務器不必解析 object。

問題 2-如何發送多個文件？ formData.append("文件", 文件); - 這不接受數組

為此，您必須按如下方式遍歷文件數組

uploadedFiles.forEach(file => formData.append('file[]', file))