Co to jest odpowiednik API Fetch API XMLHttpRequest.send (plik)?

Question

Próbuję przekonwertować klienta na stary backend z XMLHttpRequest, aby używał Fetch API zamiast, i mam problem ze zrozumieniem, co jest równoważne plikowi xhr.send (file) w pliku Fetch API w poniższym kodzie.

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 może zająć second argument, init, który określa opcje zaawansowane wniosku. W szczególności, można określić opcje method a body:

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

Można także przekazać te same opcje do Requestconstructor.

body Musi obiekt typu blob, BufferSource, FormData, URLSearchParams lub USVString. Na szczęście obiekty File są po prostu specjalnym rodzajem Blobów i mogą być używane jako everywhere where Blobs are accepted.

Answer 2

Można to zrobić tak:

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