Fetch API を使用して、ローカル ファイルを指すフォーム データ エンドポイントに文字列データを JSON ファイルとしてアップロードする方法

Question

サードパーティ CDN 上の API を使用して、ホストされた Json ファイルを更新したいと考えています。彼らのドキュメントでは、これを実現するために cURL を使用する例が提供されています。正しい cURL リクエストは次のようになります:

curl -X PUT 'https://endpoint.url.here'
  -H 'x-auth-token: <トークン>'
  -F 'file=@"path/to/your/file"'

現在、テキスト フィールドに Json テキストを入力する React ページを構築しています。ボタンが押されると、このリクエストに JSON ファイルを含めることができるように、JSON ファイルへのパスを持つことをシミュレートしたいと考えています。

基本的に 2 つの質問があります:

1. Fetch API の使用が制限されています。cURL リクエストの例を正しく反映するように Fetch リクエストを作成するにはどうすればよいですか?

2. エンドポイントがそれを受け入れるように、テキスト フィールドの文字列をファイル パス (できればファイル名で終わる) に変換するにはどうすればよいですか?

ファイル データを Blob に変換し、次のようにオブジェクト URL をパスとして使用してみました。

const file = new Blob([jsonText], {type: 'text/plain'});
var blobURL = URL.createObjectURL(file);

また、FormData を使用してリクエストを設定してみました。

let formData = new FormData();
formData.append('file', blobURL);

ヘッダー = { にします
        'x-auth-token': '<トークン>',
        'Content-Type': 'multipart/form-data'
    }

ペイロード = { にします
        メソッド: 'PUT'、
        ヘッダー: ヘッダー、
        本体: フォームデータ
    }

fetch('https://endpoint.url.here', payload) ...

これを実行しようとすると、バックエンドは「ファイルが提供されていません」などのエラーを返すだけで、リクエストが要件を満たしていないのではないかと思われます。これを達成するためのより良い方法はありますか?彼らのサンプル要求にもっと適合するために試せる提案はありますか?

Answer 1

はい、問題は無事解決しました。これらの小さな変更が鍵となります:

リーリー

現在はすべてが順調に進んでいます!