Question

我试图了解Filepond正在上传到我的服务器方法中的内容，并且遇到了一些令人困惑的问题。我仅使用process服务器方法，并且一次只测试一个文件。这是我的Filepond定义（与打字稿反应）

<FilePond
   ref={this.pond}
   allowMultiple={true}
   maxFiles={3}
   instantUpload={false}
   onupdatefiles={(files) => this.setState({files: files})}
   files={this.state.files}

   // @ts-ignore
   server={{
       process: this.getProcessUrl(),
       revert: null,
       fetch: null,
       load: null,
       restore: null,
   }}/>

files在状态对象上定义为any[]。我们通过组件保留的ref调用processFiles()来手动触发上传。 getProcessUrl根据在页面其他位置生成的ID为FilePond构建ServerUrl，并为其传递auth标头。因此，基本上server.process看起来像这样：

{ 
  url: "http://server/api/1234/upload",
  method: "POST",
  headers: {"Authorization": "foo"}
}

如果在添加单个文件的情况下触发了上传操作（如果很重要，则通过拖放操作发生，我想我没有用浏览器进行过测试），如果我查看state.files时有一项在数组中。但是，Filepond提交给我的服务器的内容如下：

------WebKitFormBoundary1YHKxKgBU2cvURKi
Content-Disposition: form-data; name="filepond"

{}
------WebKitFormBoundary1YHKxKgBU2cvURKi
Content-Disposition: form-data; name="filepond"; filename="test.csv"
Content-Type: text/csv


------WebKitFormBoundary1YHKxKgBU2cvURKi--

请注意，将首先发送名称为“ filepond”的额外表单数据。

我一直在查看文档，但是在这种情况下，实际的正文应该是什么样子还是模棱两可的，没有告诉我期望多部分的表单数据，所以我不明白我在说什么看到。是否应该有其他表单数据，并且我的服务器代码应该忽略它还是什么？

谢谢。

Answer 1

FilePond的作者在这里。 FilePond为每个文件发送两个项目。文件本身及其元数据。

元数据部分是您看到的第一个部分。它可以包含自定义元数据，图像裁剪信息等。第二个是文件。

我可以理解这可能会造成混淆，我正在考虑使此可选/易于配置。如果要解决此问题，可以设置自定义处理方法，process example in the server docs应该可以立即使用。

上传单个文件时，Filepond会先提交一个空文件，然后再提交“真实”文件

1 个答案: