So verwenden Sie die Fetch-API, um Zeichenfolgendaten als JSON-Datei auf einen Formulardatenendpunkt hochzuladen, den Sie auf eine lokale Datei verweisen möchten

Question

Ich möchte eine gehostete JSON-Datei mithilfe einer API auf einem CDN eines Drittanbieters aktualisieren. In ihrer Dokumentation stellen sie ein Beispiel bereit, bei dem cURL verwendet wird, um dies zu erreichen. Eine korrekte cURL-Anfrage sollte wie folgt aussehen:

curl -X PUT 'https://endpoint.url.here'
  -H 'x-auth-token: <token>'
  -F 'file=@"Pfad/zu/Ihrer/Datei"'

Im Moment erstelle ich eine React-Seite, auf der Sie JSON-Text in ein Textfeld eingeben und sobald eine Schaltfläche gedrückt wird, möchte ich simulieren, dass es einen Pfad zur JSON-Datei gibt, damit sie in diese Anfrage eingefügt werden kann.

Ich habe grundsätzlich zwei Fragen:

1. Ich darf die Fetch-API nicht verwenden. Wie kann ich eine Fetch-Anfrage erstellen, um die Beispiel-cURL-Anfrage korrekt wiederzugeben?

2. Wie konvertiere ich eine Zeichenfolge in einem Textfeld in einen Dateipfad (der vorzugsweise mit einem Dateinamen endet), damit der Endpunkt ihn akzeptiert?

Ich habe versucht, die Dateidaten in einen Blob zu konvertieren und die Objekt-URL wie folgt als Pfad zu verwenden:

const file = new Blob([jsonText], {type: 'text/plain'});
var blobURL = URL.createObjectURL(file);

Ich habe auch versucht, FormData zum Einrichten meiner Anfrage zu verwenden:

let formData = new FormData();
formData.append('file', blobURL);

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

let payload = {
        Methode: 'PUT',
        Überschriften: Überschriften,
        Körper: formData
    }

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

Wenn ich das versuche, antwortet das Backend nur mit einigen Fehlern wie „Datei nicht bereitgestellt“ und ich vermute, dass meine Anfrage nicht den Anforderungen entspricht. Gibt es einen besseren Weg, dies zu erreichen? Haben Sie Vorschläge, wie ich versuchen könnte, ihre Musteranfrage besser zu erfüllen?

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

现在一切都运行得很好！