搜尋

首頁  >  問答  >  主體

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

<p>我想使用第三方CDN上的API更新一個託管的Json檔案。在他們的文檔中,他們提供了一個使用cURL的範例來完成這個操作。一個正確的cURL請求應該是這樣的:</p> <pre class="brush:php;toolbar:false;">curl -X PUT 'https://endpoint.url.here' -H 'x-auth-token: <token>' -F 'file=@"path/to/your/file"'</pre> <p>現在我正在建立一個React頁面,您可以在文字欄位中輸入Json文本,一旦按下按鈕,我想模擬擁有一個路徑的json文件,以便將其放入此請求中。 </p> <p>我基本上有兩個問題:</p> <ol> <li><p>我受到使用Fetch API的限制,如何建構一個Fetch請求以正確反映範例cURL請求? </p> </li> <li><p>如何將文字欄位中的字串轉換為檔案路徑(最好以檔案名稱結尾),以便端點接受它? </p> </li> </ol> <p>我嘗試將文件資料轉換為Blob,並使用物件URL作為路徑,如下所示:</p> <pre class="brush:php;toolbar:false;">const file = new Blob([jsonText], {type: 'text/plain'}); var blobURL = URL.createObjectURL(file);</pre> <p>我還嘗試使用FormData來設定我的請求:</p> <pre class="brush:php;toolbar:false;">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) ...</pre> <p>當我嘗試這樣做時,後端只會回覆一些錯誤,例如“未提供文件”,我懷疑我的請求不符合要求。有沒有更好的方法來完成這個操作?您有任何建議我可以嘗試以更好地匹配他們的示例請求嗎? </p>
P粉156415696P粉156415696466 天前532

全部回覆(1)我來回復

  • P粉729198207

    P粉7291982072023-08-16 12:27:25

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

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

    現在一切都運行得很好!

    回覆
    0
  • 取消回覆