मल्टीपार्ट बॉडीज़

डेटा को मल्टीपार्ट/फ़ॉर्म-डेटा के रूप में पोस्ट करना

फ़ॉर्मडेटा एपीआई का उपयोग करना

ब्राउज़र

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Blob([1,2,3]));
form.append('my_file', fileInput.files[0]);

axios.post('https://example.com', फ़ॉर्म)

आंतरिक Axios सीरियलाइज़र और संबंधित शॉर्टहैंड विधि का उपयोग करके भी यही परिणाम प्राप्त किया जा सकता है:

axios.postForm('https://httpbin.org/post', {
my_field: 'my value',
my_buffer: new Blob([1,2,3]),
my_file: fileInput.files // FileList को अलग-अलग फ़ील्ड के रूप में अनरैप किया जाएगा
});

HTML फ़ॉर्म को सीधे अनुरोध पेलोड के रूप में पास किया जा सकता है।

Node.js

'axios' से axios आयात करें;

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Blob(['some content']));

axios.post('https://example.com', फ़ॉर्म)

चूँकि node.js वर्तमान में किसी फ़ाइल से Blob बनाने का समर्थन नहीं करता है, आप इस उद्देश्य के लिए किसी तृतीय-पक्ष पैकेज का उपयोग कर सकते हैं।

'formdata-node/file-from-path' से {fileFromPath} आयात करें

form.append('my_field', 'my value');
form.append('my_file', await fileFromPath('/foo/bar.jpg'));

axios.post('https://example.com', फ़ॉर्म)

v1.3.0 से पुराने Axios के लिए, आपको form-data पैकेज आयात करना होगा।

const FormData = require('form-data');

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Buffer(10));
form.append('my_file', fs.createReadStream('/foo/bar.jpg'));

axios.post('https://example.com', form)

🆕 स्वचालित क्रमांकन

v0.27.0 से शुरू होकर, Axios, FormData ऑब्जेक्ट में स्वचालित ऑब्जेक्ट क्रमांकन का समर्थन करता है, यदि अनुरोध Content-Type हेडर multipart/form-data पर सेट है।

निम्नलिखित अनुरोध डेटा को FormData प्रारूप (ब्राउज़र और Node.js) में सबमिट करेगा:

'axios' से axios आयात करें;

axios.post('https://httpbin.org/post', {
उपयोगकर्ता: {
नाम: 'दिमित्री'
},
फ़ाइल: fs.createReadStream('/foo/bar.jpg')
}, {
शीर्षलेख: {
'सामग्री-प्रकार': 'मल्टीपार्ट/फ़ॉर्म-डेटा'
}
}).then(({data})=> console.log(data));

Axios FormData serializer निम्नलिखित ऑपरेशन करने के लिए कुछ विशेष अंत का समर्थन करता है:

• {} - JSON.stringify के साथ मान को क्रमबद्ध करें
• [] - सरणी-जैसे ऑब्जेक्ट को समान कुंजी वाले अलग-अलग फ़ील्ड के रूप में अनरैप करें

नोट: अनरैप/विस्तार ऑपरेशन डिफ़ॉल्ट रूप से सरणी और FileList ऑब्जेक्ट पर उपयोग किया जाएगा

FormData serializer दुर्लभ मामलों को संभालने के लिए config.formSerializer: object प्रॉपर्टी के माध्यम से अतिरिक्त विकल्पों का समर्थन करता है:

• visitor: Function - उपयोगकर्ता-निर्धारित विज़िटर फ़ंक्शन जिसे कस्टम नियमों का पालन करके डेटा ऑब्जेक्ट को क्रमबद्ध करने के लिए पुनरावर्ती रूप से कॉल किया जाएगा एक FormData ऑब्जेक्ट में।

• dots: boolean = false - सरणी और ऑब्जेक्ट को क्रमबद्ध करने के लिए कोष्ठक के बजाय बिंदु संकेतन का उपयोग करें;

• metaTokens: boolean = true - FormData कुंजी में विशेष अंत (जैसे user{}: '{"name": "John"}') जोड़ें। बैक-एंड बॉडी-पार्सर संभवतः इस मेटा-सूचना का उपयोग JSON के रूप में मान को स्वचालित रूप से पार्स करने के लिए कर सकता है।

• indexes: null|false|true = false - नियंत्रित करता है कि flat सरणी-जैसे ऑब्जेक्ट्स की अनरैप्ड कुंजियों में इंडेक्स कैसे जोड़े जाएँगे।

• null - कोष्ठक न जोड़ें (arr: 1, arr: 2, arr: 3)

• false(डिफ़ॉल्ट) - रिक्त कोष्ठक जोड़ें (arr[]: 1, arr[]: 2, arr[]: 3)

• true - इंडेक्स के साथ कोष्ठक जोड़ें (arr[0]: 1, arr[1]: 2, arr[2]: 3)

मान लीजिए हमारे पास इस तरह का एक ऑब्जेक्ट है:

const obj = {
x: 1,
arr: [1, 2, 3],
arr2: [1, [2], 3],
उपयोगकर्ता: [{नाम: 'पीटर', उपनाम: 'ग्रिफिन'}, {नाम: 'थॉमस', उपनाम: 'एंडरसन'}],
'obj2{}': [{x:1}]
};

निम्नलिखित चरण Axios सीरियलाइज़र द्वारा आंतरिक रूप से निष्पादित किए जाएँगे:

const formData= new FormData();
formData.append('x', '1');
formData.append('arr[]', '1');
formData.append('arr[]', '2');
formData.append('arr[]', '3');
formData.append('arr2[0]', '1');
formData.append('arr2[1][0]', '2');
formData.append('arr2[2]', '3');
formData.append('users[0][name]', 'पीटर');
formData.append('users[0][surname]', 'ग्रिफिन');
formData.append('users[1][name]', 'थॉमस');
formData.append('users[1][surname]', 'एंडरसन');
formData.append('obj2{}', '[{"x":1}]');

'axios' से axios आयात करें;

axios.post('https://httpbin.org/post', {
'myObj{}': {x: 1, s: "foo"},
'files[]': document.querySelector('#fileInput').files
}, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(({data})=> console.log(data));

Axios निम्नलिखित शॉर्टकट विधियों का समर्थन करता है: postForm, putForm, patchForm जो कि संबंधित http विधियाँ हैं जिनका content-type हेडर multipart/form-data पर प्रीसेट है।

FileList ऑब्जेक्ट को सीधे पास किया जा सकता है:

await axios.postForm('https://httpbin.org/post', document.querySelector('#fileInput').files)

सभी फ़ाइलें समान फ़ील्ड नामों के साथ भेजी जाएँगी: files[];