3

Filepond がサーバー メソッドにアップロードしているものを理解しようとしていますが、非常に紛らわしいことに遭遇しました。私はprocessサーバー方式のみを使用しており、一度に 1 つのファイルでテストしています。これが私のFilepond定義です(これはtypescriptに反応します)

<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 を介して呼び出すことにより、アップロードを手動でトリガーしています。getProcessUrlページの別の場所で生成された ID に基づいて for FilePond を構築し、ServerUrl渡す認証ヘッダーを与えます。したがって、基本的にserver.processは次のようになります。

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

単一のファイルが追加された状態でアップロードがトリガーされた場合 (それが重要な場合はドラッグ アンド ドロップを介して、ブラウズでこれをテストしていないことがわかります) state.files、配列に 1 つの項目があることを確認します。ただし、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