使用 filepond 参数手动触发 filepond 中的服务器方法答案

【问题标题】：Manual Triggering of server methods in filepond with filepond params使用 filepond 参数手动触发 filepond 中的服务器方法
【发布时间】：2020-01-07 16:02:34
【问题描述】：

我想在 filepond-react 组件中手动触发fetch 方法。为了简化，我削减了其他道具。

  // FileUpload Wrapper
  <div className="file-upload">
    <FilePond
      ref={this.props.innerref}
      files={this.state.files}
      onupdatefiles={this.updateFiles}
      {...this.props}
    />
  </div>

  // Calling the wrapper in the parent component
  <FileUpload
    innerref={this.fileRef}
    server={{
      fetch: this.onFileFetch,
      process: this.onUpload,
      revert: this.onFileRevert,
    }}
  />

服务器方法

// fetch
onFileFetch = async (url, load, error, progress, abort, headers) => {
  // function triggers but cannot access load, progress etc. here
}

// upload
onUpload = async (fieldName, file, metadata, load, error, progress, abort) => {
  // function triggers and can access load, error etc.
}

// delete/revert
onFileRevert = async (uniqueFileId, load, error) => {
  // function triggers and can access load, error etc.
}

行为与触发

因此，当我分别单击上传和还原图标时，会触发上传和删除。我想手动触发fetch()，为此我调用this.fileRef.current.props.server.fetch()

为什么不能访问该函数的参数？（负载、错误等）
我在下面添加了文件池对象又名this.fileRef.current 以供参考。

```
{current: FilePond}
  current: FilePond
    isMounted: (...)
    replaceState: (...)
    props:
      ref: (...)
      files: []
      instantUpload: false
      oninit: undefined
      labelIdle: "Drag file(s) here<br> or <br><br><span class="filepond--label-action">Browse</span>"
      onupdatefiles: ƒ (fileItems)
      innerref: {current: FilePond}
      className: "in-block s3-bucket-file-input"
      server:
        fetch: ƒ (url, load, error, progress, abort, headers)
        load: ƒ (source, load, error, progress, abort, headers)
        process: ƒ (fieldName, file, metadata, load, error, progress, abort)
        revert: ƒ (uniqueFileId, load, error)
        restore: ƒ (uniqueFileId, load, error, progress, abort, headers)
        remove: ƒ (source, load, error)
        __proto__: Object
      get ref: ƒ ()
      __proto__: Object
    context: {}
    refs: {}
    updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
    allowFilesSync: true
    _reactInternalFiber: FiberNode {tag: 1, key: null, stateNode: FilePond, elementType: ƒ, type: ƒ, …}
    _reactInternalInstance: {_processChildContext: ƒ}
    state: null
    _element: input.in-block.s3-bucket-file-input
    _pond: {on: ƒ, onOnce: ƒ, off: ƒ, setOptions: ƒ, addFile: ƒ, …}
    addFile: ƒ addFile(source)
    addFiles: ƒ addFiles()
    getFile: ƒ getFile(query)
    processFile: ƒ processFile(query)
    prepareFile: ƒ prepareFile(query)
    removeFile: ƒ removeFile(query)
    moveFile: ƒ moveFile(query, index)
    getFiles: ƒ getFiles()
    processFiles: ƒ processFiles()
    removeFiles: ƒ removeFiles()
    prepareFiles: ƒ prepareFiles()
    sort: ƒ sort(compare)
    browse: ƒ browse()
    __proto__: Component
    __proto__: Object
```

【问题讨论】：

标签： javascript reactjs filepond

【解决方案1】：

如果您手动调用this.fileRef.current.props.server.fetch()，您不会将任何参数传递给函数。 FilePond 在调用函数时会传递这些参数url, load, error, progress, abort, headers，所以如果你想这样使用它，你也应该这样做。

函数不必标记为async，它们可以是普通函数。

【讨论】：