XMLHttpRequest.send (फ़ाइल) के Fetch API समतुल्य क्या है?

Question

मैं एक क्लाइंट को XMLHttpRequest से पुराने बैकएंड में रीफैक्टर करने की कोशिश कर रहा हूं, इसके बजाय Fetch API का उपयोग करने के लिए, और मुझे यह पता लगाने में कठिनाई हो रही है कि Fetr API को xhr.send (फ़ाइल) के बराबर नीचे दिए गए कोड में क्या है।

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 को ब्लॉब, बफर स्रोत, फॉर्मडाटा, URLSearchParams, या USVString ऑब्जेक्ट होना चाहिए। सौभाग्य से, फाइल ऑब्जेक्ट्स केवल एक विशेष प्रकार के ब्लॉब्स हैं, और 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