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

现在一切都运行得很好！