使用Fetch API將字串資料上傳為JSON檔案到希望指向本機檔案的表單資料端點的方法

Question

我想使用第三方CDN上的API更新一個託管的Json檔案。在他們的文檔中，他們提供了一個使用cURL的範例來完成這個操作。一個正確的cURL請求應該是這樣的：

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

現在我正在建立一個React頁面，您可以在文字欄位中輸入Json文本，一旦按下按鈕，我想模擬擁有一個路徑的json文件，以便將其放入此請求中。

我基本上有兩個問題：

1. 我受到使用Fetch API的限制，如何建構一個Fetch請求以正確反映範例cURL請求？

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);

let headers = {
        'x-auth-token': '<token>',
        'Content-Type': 'multipart/form-data'
    }

let payload = {
        method: 'PUT',
        headers: headers,
        body: formData
    }

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

當我嘗試這樣做時，後端只會回覆一些錯誤，例如“未提供文件”，我懷疑我的請求不符合要求。有沒有更好的方法來完成這個操作？您有任何建議我可以嘗試以更好地匹配他們的示例請求嗎？

Answer 1

沒錯，我成功解決了自己的問題。這些小修改就是關鍵：

const jsonBlob = new Blob(['<jsonText>'], {type: 'application/json'});

let formData = new FormData();
formData.append('file', jsonBlob, 'filename.json');

const headers = new Headers();
headers.append('x-auth-token', '<token>');

let payload = {
    method: 'PUT',
    headers: headers,
    body: formData
}

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

現在一切都運行得很好！