javascript - react 、Redux、Filepond

Question

我的问题...如何使用 FilePond 但 onclick 上传文件，而不是像开箱即用的那样自动上传文件？另外，因为我需要对这些图像执行许多其他操作(例如在上传之前显示它们以供审阅)，并且因为我需要将其他数据添加到发送的 FormData(加上向 Redux 的调度操作)。

通常，我会创建一个 FormObject，将文件和其他值附加到其中，然后将其发布到某个端点(需要任何自定义 header )。然而，当我检查 FilePond 实例时，似乎我唯一可以访问的是一个 blob...而不是实际的文件。这准确吗？我是否需要遵循一些特殊的 FilePond 特定技术才能使文件上传正常工作？

FilePond 的文档有一个名为“server”的自定义配置值，在更高级的示例中它似乎可以访问实际文件，所以这是必须完成的方式吗？我不能只是抓取文件(从我当前在 FilePond 实例上看不到的某个地方)并将它们附加到一个对象以在我的正常“服务”中使用？

如有任何提示，我们将不胜感激。在 React 应用程序中，我想在附加其他表单数据并设置 header (最好使用 Axios)后通过单击上传可变数量的文件，并将这些文件发布到 API。

他们文档中的示例使用了如下 Prop :

server="/api"

我想要类似的东西(假代码):

server={submitImages} <-- this should only happen onclick of some button

地点:

submitImages = (fieldName, file) => {
  const formData = new FormData()
  formData.append(fieldName, file, file.name)
  formData.append('foo', this.props.foo)
  const docuploadresult = this.props.uploadDocs(formData) <-- a service that lives elsewhere and actually does the POST
  docuploadresult.then(result => {
        // success
      }, error => {
        // error
      })
}

我的问题是，我不明白为什么需要在某些特殊的配置对象(如服务器)中发生这种情况，不知道如何在单击时发生这种情况，没有看到实际的文件在任何地方。

我可能想太多了？

Answer 1

FilePond 提供server 属性，以便它可以为您处理上传。但这不是必需的，您可以使用getFiles轻松请求 FilePond 中的所有文件项(和 File 对象)并自行上传。

将您自己的提交按钮添加到表单中，并使用下面的 submitImages 提交文件。

submitImages = (fieldName) => {

  const formData = new FormData();

  this.filepondRef.getFiles()
    .map(fileItem => fileItem.file)
    .forEach(file => {
      formData.append(fieldName, file, file.name);
    });

  // upload here

}

如果你想显示图像预览，你可以添加图像预览插件。 https://pqina.nl/filepond/docs/patterns/plugins/image-preview/