Fetch APIに相当するXMLHttpRequest.send（file）とは何ですか？

Question

XMLHttpRequestの古いバックエンドにクライアントをリファクタリングしてFetch APIを代わりに使用しようとしていますが、xhr.send（file）のFetch APIに相当するものが以下のコードに含まれています。

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は、要求の高度なオプションを指定しsecond argument、initを取ることができます。特に、あなたはmethodとbodyオプションを指定することができます。

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

またRequestconstructorに同じオプションを渡すことができます。

bodyは、Blob、BufferSource、FormData、URLSearchParams、またはUSVStringオブジェクトでなければなりません。幸運なことに、Fileオブジェクトはほんの一種のBlobであり、everywhere where Blobs are acceptedを使うことができます。

Answer 2

これは次のように行うことができます。

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