使用Fetch API将字符串数据上传为JSON文件到希望指向本地文件的表单数据端点的方法
P粉156415696
2023-08-15 23:09:47
<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>
没错,我成功解决了自己的问题。这些小修改就是关键:
现在一切都运行得很好!