React、Redux、Filepond

Question

我的问题...我如何使用 FilePond 上传文件但点击时不会像开箱即用那样自动上传文件？此外，因为我需要对这些图像采取一些其他操作（比如在上传之前显示它们以供审查）并且因为我需要将其他数据添加到发送的 FormData（加上对 Redux 的调度操作）。

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

FilePond 的文档有一个名为 "server" 的自定义配置值，在更高级的示例中似乎可以访问实际文件，所以必须这样做吗？我不能只抓取文件（从我目前在 FilePond 实例上看不到的地方）并将它们附加到 object 以便在我的正常 "service"?

中使用

如有任何提示，我们将不胜感激。在 React 应用程序中，我想在附加其他表单数据并设置 headers（理想情况下使用 Axios）和 POST 这些文件到 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
      })
}

我的问题是我不明白为什么这需要在某些特殊配置 object 中发生，例如 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/

React、Redux、Filepond

React, Redux, Filepond

javascript

file-upload

reactjs

filepond