时间戳

首页 > 解决方案 > primeng fileUpload 发送表单数据并将文件数组传递给服务层

java - primeng fileUpload 发送表单数据并将文件数组传递给服务层

问题描述

我正在使用 p-fileUpload primeng 组件。我有一个要求，除了选择的文件之外，还必须提交表单中的另一个 p-multiselect。以下是文件上传的工作代码。当我选择并单击上传时，它会上传文件。我想将 uploadFileCtr($event) 更改为 uploadFileCtr($event,faqForm.value ) 并在 ts 文件的 uploadFileCtr() 方法中传递注释代码。我尝试将此行添加到 service.ts formdata：

formData.append("faqObj", faqObj);

但是我无法在我的休息服务中获得对象。我试图在我的 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("文件", 文件); - 这不接受数组

标签： javaangularrestprimeng

解决方案

问题 1 - 我可以在上传的同时添加 formObj - 如果可以，如何添加？

如果您必须在 formData 中发送整个对象，有两种方法，

  1. 像这样对对象进行字符串化 -formData.append("faqObj", JSON.stringify(faqObj)); 在这种情况下，服务器必须解析字符串化的对象。
  2. 另一种方法是附加对象的键循环遍历对象，如Object.keys(faqObj).forEach(ele => formData.append(`faqObj[${ele}]`), faqObj[ele]) 在这种情况下，服务器不必解析对象。

问题 2-如何发送多个文件？formData.append("文件", 文件); - 这不接受数组

为此，您必须按如下方式遍历文件数组

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

推荐阅读