React、Redux、Filepond

Question

我的问题是。我如何使用FilePond上传文件，而不是像它开箱即用那样自动上传文件？此外，由于我需要对这些图像采取许多其他操作(如在上传之前显示它们以供审查)，而且我需要将其他数据添加到发送的FormData中(加上向Redux发送操作)。

通常，我会创建一个FormObject，在将其POSTing到某个端点(使用所需的任何自定义标头)之前，将文件和其他值附加到它上面。然而，当我检查FilePond实例时，似乎我唯一有权访问的是blob……而不是实际的文件。这是准确的吗？我是否需要遵循一些特殊的FilePond特定技术才能让文件上传起作用？

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

任何建议都是值得感谢的。在React应用程序中，我希望在添加其他表单数据和设置标题(理想情况下，使用Axios )并将这些文件发布到API后，在onclick上上传数量可变的文件。

他们文档中的示例使用了如下道具：

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
      })
}

我的问题是，我不明白为什么这需要发生在像server这样的特殊配置对象中，我不明白如何在单击时实现这一点，也看不到任何实际的文件。

我是不是想多了？

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/