使用Fetch API将字符串数据上传为JSON文件到希望指向本地文件的表单数据端点的方法
P粉156415696
P粉156415696 2023-08-15 23:09:47
0
1
529
<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粉156415696
P粉156415696

全部回复(1)
P粉729198207

没错,我成功解决了自己的问题。这些小修改就是关键:

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

现在一切都运行得很好!

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板