javascript - 使用Filepond参数手动触发Filepond中的服务器方法

我想在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()

为什么不能把该函数的参数归类？ （加载，错误等）
我在下面添加了filepond对象（又称为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
```

最佳答案

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

这些功能不必标记为async，它们可以是普通功能。

关于javascript - 使用Filepond参数手动触发Filepond中的服务器方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59612648/