Qual è l'equivalente dell'API Fetch di XMLHttpRequest.send (file)?

Question

Sto cercando di rifattorizzare un client con un vecchio backend da XMLHttpRequest per usare invece l'API Fetch, e sto avendo difficoltà a capire quale sia l'equivalente dell'API Fetch di xhr.send (file) nel codice qui sotto.

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 1

fetch può prendere un second argument, init, che specifica le opzioni avanzate dalla richiesta. In particolare, è possibile specificare le opzioni method e la body:

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

È inoltre possibile passare le stesse opzioni per il Requestconstructor.

body deve un oggetto Blob, BufferSource, FormData, URLSearchParams o USVString. Fortunatamente, gli oggetti File sono solo un tipo speciale di Blob e possono essere utilizzati everywhere where Blobs are accepted.

Answer 2

questo può essere fatto in questo modo:

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