React,Redux,Filepond

时间:2019-01-09 23:37:01

标签: javascript reactjs file-upload filepond

我的问题...我如何使用FilePond而非onclick上传文件,而不是像开箱即用的那样自动上传?另外,由于我需要对这些图像进行其他一些操作(例如在上传之前将其显示以供审阅),并且由于需要将其他数据添加到要发送的FormData中(加上对Redux的分派操作)。

通常,我将创建一个FormObject,将文件和其他值附加到该对象上,然后再将其发布到某个端点(需要任何自定义标头)。但是,当我检查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)中发生这种情况,看不到如何使它在单击时发生,在任何地方都看不到实际的文件。

我可能对此有过多思考?

1 个答案:

答案 0 :(得分:3)

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/