Wie mit mehrteiliger POST/form-data-Header und Formdata holen mit

Question

Dies ist ein ROTATION Beispiel, das funktioniert gut:

curl -X POST \ 
    <url> \ 
    -H 'authorization: Bearer <token>' \ 
    -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \ 
    -F file=@algorithm.jpg \ 
    -F userId=<userId> 

Ich versuche, diese Anforderung isomorphic-fetch mit zu reproduzieren.

Ich habe den folgenden Code versucht:

const formData = new FormData(); 
formData.append('file', file); 
formData.append('userId', userId); 

return fetch(`<url>`, {  
    method: 'POST', 
    headers: { 
    'Content-Length': file.length 
    'Authorization: Bearer <authorization token>', 
    'Content-Type': 'multipart/form-data' 
    }, 
    body: formData 
})` 

Ich benutze fs.readFileSync um die file-FormData weitergegeben zu erzeugen.

Das obige Beispiel gibt einen 401 HTTP-Statuscode (unberechtigten) mit einer Meldung Fehlermeldung, dass die userId in dem Token eingebettet (via Header gesendet) nicht die userId von formData geben lassen.

Also mein Verdacht ist, dass die FormData, die in der REST-API ankommt, nicht ausreichend gebildet wird.

Das Problem kann mit dem Content-Length Header in Beziehung gesetzt werden, aber ich finde es nicht einen besseren Weg zu berechnen (wenn ich das ich einen 411 fehlenden Statuscode Content-Length Header HTTP erhalten Content-Length Header nicht verwenden).

Könnte der Fall sein, dass dies aufgrund eines falschen Werts im Header Content-Length fehlschlägt?

Haben Sie noch weitere Vorschläge, warum dies fehlschlägt oder wie Sie es besser debuggen können?

Wenn weitere Informationen benötigt werden, um dieses Problem zu klären, fragen Sie einfach nach.

UPDATE

ich das form-data Modul, um versucht haben, den richtigen Content-Length Wert mit der Methode formData.getLengthSync()

aber das Problem bleibt das gleiche (401 Fehler HTTP-Statuscode-Antwort) zu erhalten.

Answer 1

Wenn Sie Ihr Netzwerk Inspektor öffnen, führen Sie diesen Code-Schnipsel, und senden Sie das Formular sollten Sie sehen, dass die Content-Length richtig eingestellt ist:

const foo = document.getElementById('foo') 
 
foo.addEventListener('submit', (e) => { 
 
    e.preventDefault() 
 
    const formData = new FormData(foo) 
 
    formData.append('userId', 123) 
 
    fetch('//example.com', { 
 
    method: 'POST', 
 
    body: formData 
 
    }) 
 
})

<form id="foo"> 
 
    <input id="file" type="file" name="file"/><br><br> 
 
    <button type="submit">Submit</button> 
 
</form>