上传单个文件时，Filepond 在提交 "real" 文件之前先提交一个空文件

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 在状态 object 上定义为 any[]。我们通过组件保留的元素 ref 调用 processFiles() 来手动触发上传。 getProcessUrl 根据在页面其他地方生成的 id 为 FilePond 构建一个 ServerUrl，并为其提供 auth header 以通过。所以基本上 server.process 看起来像这样：

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

当添加单个文件触发上传时（通过 drag-and-drop 如果这很重要，我突然想到我没有通过浏览测试过）如果我看 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" 的额外 form-data。

我一直在查看文档，但在这种情况下实际的 post body 应该是什么样子并没有告诉我期待 multipart form-data，所以我不明白我在看什么。那条额外的表单数据是否应该存在，我的服务器代码应该忽略它还是什么？

谢谢。

Answer 1

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

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

我知道这可能会造成混淆，我正在研究如何让这个 optional/easier 进行配置。如果您想解决这个问题，您可以设置自定义处理方法，process example in the server docs 应该开箱即用。

上传单个文件时，Filepond 在提交 "real" 文件之前先提交一个空文件

When uploading a single file, Filepond submits an empty file before submitting the "real" file

typescript

reactjs

filepond