FilePond 在 React 上覆盖 server.process答案

【问题标题】：FilePond override server.process on ReactFilePond 在 React 上覆盖 server.process
【发布时间】：2020-04-13 23:19:19
【问题描述】：

我正在尝试在 React 应用程序中使用 FilePond 控件。我需要使用自定义代码处理文件上传。根据文档，我应该使用 setOption 来覆盖 server.process 函数。 Documentation Link

在使用 React 组件时，这似乎不是一个选项。

我可以找到多个尝试这样做的人的实例，但找不到任何如何这样做的示例。

<FilePond 
  files={this.state.newFiles}
  allowMultiple={true}  
  server={this.someFunction}
/>

【问题讨论】：

你检查过这个链接吗？ github.com/pqina/react-filepond
是的，按照这些说明将 ref={ref => (this.pond = ref)} 和 oninit={() => this.handleInit()} 添加到组件中。但是，尝试调用 this.pond.setOptions 失败，因为 this.pond.setOptions is not a function。

标签： reactjs filepond

【解决方案1】：

使用 React，您需要使用 server 属性。 server 属性是 URL 或配置对象，而不是函数。

<FilePond 
  files={this.state.newFiles}
  allowMultiple={true}  
  server={{
    process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
        // your processing code here
    }
  }}
/>

有关更多信息，请查看此示例处理函数： https://pqina.nl/filepond/docs/patterns/api/server/#advanced

【讨论】：

【解决方案2】：

如github问题FilePond.SetOptions not worked中所述

使用 React，FilePond 对象是一个组件，没有全局 FilePond 对象目前可用。你可以通过服务器组件的属性作为道具。

我相信你也需要这样做，而不是调用setOptions函数，你可以将这些选项作为属性传递给FilePond组件

如果您确实需要访问setOptions，我已经从react-filepond 中分叉了示例并添加了useEfect，您可以在其中查看如何访问setOptions 函数：accees setOptions by ref

【讨论】：

听起来不错……但是怎么做呢？我可以添加属性 process={() =>this.uploadFiles()} 但这永远不会被触发。
通过添加如何获取 setOptions 函数的示例来更新答案，如果这没有帮助，您能否更新您的问题，详细说明您想要实现的目标？