2

我正在尝试提交一个包含文本字段和文件上传器的表单。文件上传器与 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));
        }

所以我需要在我用来将数据持久保存在实体中的同一个 API 端点中上传这个 Filepond 文件。我应该使用 server={} 属性来促进这一点吗？我需要以相同的表单提交功能上传这些文件。

任何指南表示赞赏。

4

1 回答 1

0

我不确定这会如何转化为反应，但您可以在文件项上使用setMetaData 方法。

于 2021-09-24T23:34:58.867 回答