3

我试图了解 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[]。我们processFiles()通过组件保留的元素 ref 调用手动触发上传。根据页面上其他地方生成的 id 为 FilePondgetProcessUrl构建一个，并为其提供一个 auth 标头以传递。ServerUrl所以基本上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”的额外表单数据。

我一直在查看文档，在这种情况下实际的帖子正文应该是什么样子并没有告诉我期待多部分表单数据，所以我不明白我所看到的内容。那额外的表单数据是否应该在那里，我的服务器代码应该忽略它还是什么？

谢谢。

4

1 回答 1

4

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

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

我可以理解这可能会令人困惑，我正在考虑使这个可选/更易于配置。如果您想解决此问题，您可以设置自定义处理方法，服务器文档中的流程示例应该开箱即用。

于 2019-05-08T18:36:55.277 回答