Wie lautet das Fetch-API-Äquivalent von XMLHttpRequest.send (Datei)?

Question

Ich versuche, einen Client zu einem alten Back-End von XMLHttpRequest zu refactorieren, um stattdessen die Fetch-API zu verwenden, und es fällt mir schwer herauszufinden, was die Fetch-API-Entsprechung von xhr.send (file) im folgenden Code ist.

var input = document.querySelector('input[type="file"]') 

var data = new FormData() 
data.append('file', input.files[0]) 

fetch('/avatars', { 
    method: 'POST', 
    body: data 
}) 

https://github.com/github/fetch

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 1

fetch kann nehmen second argument, init, die erweiterten Optionen gibt der Anfrage:

input.addEventListener('change', function(event) { 
    var file = event.target.files[0]; 
    var url = 'https://somedomain.com/someendpoint'; 
    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', url, true); 
    xhr.setRequestHeader('Content-Type', 'image/jpeg'); 
    xhr.send(file); 
} 

Answer 2

Dies kann wie folgt durchgeführt werden. Insbesondere können Sie die method und die body Optionen angeben:

fetch(url, { 
    method: 'POST', 
    headers: new Headers({ 
    "Content-Type": "image/jpeg", 
    }), 
    body: file, 
}) 

Sie können auch die gleichen Optionen zum Requestconstructor passieren.

body müssen ein Blob-, BufferSource-, FormData-, URLSearchParams- oder USVString-Objekt sein. Glücklicherweise sind Dateiobjekte nur eine spezielle Art von Blobs und können verwendet werden everywhere where Blobs are accepted.