使用Filepond文件上载器和其他输入字段将表单数据提交到后端

时间:2019-05-07 08:01:04

标签: reactjs rest spring-boot axios filepond

我正在尝试提交一个由文本字段和一个文件上载器组成的表单。文件上传器与react-filepond集成如下。


    <FilePond
     ref={ref => (this.pond = ref)}
     files={this.state.files}
     allowMultiple={true}
     maxFiles={5}
     server={() => this.saveComplaint()}
     oninit={() => this.handleInit()}
     onupdatefiles={fileItems => {
      this.setState({files: fileItems.map(fileItem => fileItem.file)});
      console.log("file aaa", this.state.files); }} />

我需要做的是,将输入字段中填充的所有数据提交到当前用于持久化其他字段的同一REST api端点(文件是可选的)。目前,它通过表单提交事件得到了简化。

API端点:


    @PostMapping("/{orderId}/items/{itemId}")
        public ResponseEntity<QualityComplaintDto> createInquiry(@RequestBody QualityComplaintDto complaintDto,
                                                                 @PathVariable long itemId,
                                                                 @PathVariable long orderId,
                                                                 @RequestParam("files") @Nullable List<MultipartFile> multipartFiles) {
            LOGGER.info("Inquiry saving started for id = [{}]", complaintDto.getId());
            QualityComplaintEntity complaintEntity =null;
            ArrayList<String> fileNames = null;

            complaintEntity = complaintService.createInquiry(orderId, itemId, complaintDto, multipartFiles);
            LOGGER.info("Inquiry saving completed for id = [{}]", complaintDto.getId());
            return ResponseEntity.ok(QualityComplaintDto.toDto(complaintEntity));
        }

因此,我需要在我用于将数据持久存储在Entity的同一API端点中运行此Filepond文件的功能。我应该使用该server = {}属性来简化此操作吗?我需要以相同的表单提交功能上传这些文件。

任何指南都值得赞赏。

0 个答案:

没有答案