axios पोस्ट फॉर्म डेटा भेजने का अनुरोध करता है

Question

axios POSTअनुरोध नियंत्रक पर url मार रहा है, लेकिन मेरे POJO वर्ग के लिए शून्य मान सेट कर रहा है, जब मैं क्रोम में डेवलपर टूल से गुजरता हूं, तो पेलोड में डेटा होता है। मैं क्या गलत कर रहा हूं?

एक्सिस पोस्ट अनुरोध:

var body = {
    userName: 'Fred',
    userEmail: '[e-mail]'
}

axios({
    method: 'post',
    url: '/addUser',
    data: body
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

ब्राउज़र प्रतिक्रिया:

अगर मैं हेडर सेट करता हूं:

headers:{
  Content-Type:'multipart/form-data'
}

अनुरोध त्रुटि फेंकता है

मल्टीपार्ट / फॉर्म-डेटा पोस्ट करने में त्रुटि। सामग्री-प्रकार हेडर अनुपस्थित सीमा है

अगर मैं पोस्टमैन में समान अनुरोध करता हूं तो यह ठीक काम कर रहा है और मेरे POJO वर्ग के लिए मान सेट करता है।

क्या कोई समझा सकता है कि सीमा कैसे तय की जाए या मैं कैसे axios का उपयोग करके प्रपत्र डेटा भेज सकता हूं।

Answer 1

आप FormData () का उपयोग करके अक्षतंतु डेटा पोस्ट कर सकते हैं:

var bodyFormData = new FormData();

और फिर फ़ील्ड को उस फॉर्म में जोड़ें, जिसे आप भेजना चाहते हैं:

bodyFormData.set('userName', 'Fred');

यदि आप चित्र अपलोड कर रहे हैं, तो आप उपयोग करना चाह सकते हैं .append

bodyFormData.append('image', imageFile); 

और फिर आप axios पोस्ट विधि का उपयोग कर सकते हैं (आप तदनुसार इसे संशोधित कर सकते हैं)

axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    headers: {'Content-Type': 'multipart/form-data' }
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

आप यहाँ और अधिक पढ़ सकते हैं

Comments

bodyFormData.set एक फ़ंक्शन नहीं है जो मुझे यह त्रुटि मिली

— मनोज भारद्वाज

आपको सेट के बजाय एपेंड का उपयोग करना होगा।

— प्रतिक सिंघल

@ManojBhardwaj आपको फ़ंक्शन को बाँधने की आवश्यकता है, मान लें कि फ़ंक्शन फ़ंक्शन के अंदर ur बनाने का अनुरोध उस फ़ंक्शन को बाइंड करने की आवश्यकता है। ex: - onSubmit = {this.submit (bind (यह)} या ex: - निर्माण निर्माता (सुपर) {this.submit = this.submit.bind (यह);} में सबमिट करें () {axios ({}); ; ...}

— श्रीकांत गौड़ा

bodyFormData.append मेरे लिए भी काम किया जाता है। सुनिश्चित नहीं हैं कि क्यों setकाम नहीं कर रहा है

— इम बैटमैन

आपकी कॉन्फ़िग ऑब्जेक्ट गलत है। यह होना चाहिए:{ method: 'post', url: 'myurl', data: bodyFormData, headers: {'Content-Type': 'multipart/form-data' } }

— स्टीव टेलर

Answer 2

की जाँच करें क्वेरी स्ट्रिंग ।

आप इसका उपयोग इस प्रकार कर सकते हैं:

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

Comments

नोड के माहौल में यह और भी बेहतर है

— जाजवे डेनिस

यदि आपके डेटा में ऑब्जेक्ट्स नेस्टेड हैं, तो 'querystring' अपेक्षा के अनुरूप काम नहीं कर सकता है। उस स्थिति में, आप डेटा को कठोर करने के लिए 'क्यू' मॉड्यूल का उपयोग कर सकते हैं।

— जिहाद उल इस्लाम

Answer 3

मेरे मामले में मुझे हेडर की सीमा को निम्नलिखित की तरह जोड़ना था :

const form = new FormData();
    formData.append(item.name, fs.createReadStream(pathToFile));

    const response = await axios({
        method: 'post',
        url: 'http://www.yourserver.com/upload',
        data: form,
        headers: {
        'content-type': `multipart/form-data; boundary=${form._boundary}`,
        },
    });

यदि आप रिएक्टिव नेटिव के साथ काम कर रहे हैं तो यह समाधान भी उपयोगी है।

Comments

यह मेरे मुद्दे को हल किया जब imgur के एपीआई को पोस्ट करने की कोशिश कर रहा था। डॉक्स पर कहीं भी उल्लेख नहीं किया गया है, लेकिन इसके बिना आपको 400 अमान्य URL प्रतिक्रिया मिलती है।

— कोल्बी

FormData._boundaryChrome 76 और फ़ायरफ़ॉक्स 67 दोनों में अपरिभाषित है, और axios वैसे भी सामग्री-प्रकार हेडर को हटा देता है , इसलिए इसका कोई प्रभाव नहीं होना चाहिए।

— ऐश

सीमा का हिस्सा केवल एक चीज थी जो मेरे कोड से गायब थी, नोड में पूर्णता का काम करती थी!

— राफेल मोनी

आप एक जीवन रक्षक हैं

— केविन रेड

नमस्ते, एक समस्या हालांकि यह केवल एंड्रॉइड में काम करता है क्या आपने इसे iOS उपकरणों पर काम करने में कामयाब किया है?

— केविन रेड

Answer 4

अपलोड (एकाधिक) बाइनरी फाइलें

Node.js

जब आप फ़ाइलों को पोस्ट करना चाहते हैं तो चीजें जटिल हो जाती हैं multipart/form-data, विशेष रूप से कई बाइनरी फाइलें। नीचे एक कार्य उदाहरण दिया गया है:

const FormData = require('form-data')
const fs = require('fs')
const path = require('path')

const formData = new FormData()
formData.append('files[]', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('files[]', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData, {
  headers: formData.getHeaders()
})

• इसके बजाय headers: {'Content-Type': 'multipart/form-data' }मैं पसंद करता हूंheaders: formData.getHeaders()
• अगर आप उन्हें पसंद नहीं करते हैं, तो मैं उन्हें ऊपर asyncऔर awaitसादे बयानों में बदल सकता हूं

---

नीचे दी गई नई सामग्री:

ब्राउज़र

ब्राउज़र FormDataएनपीएम पैकेज 'फॉर्म-डेटा' से अलग है। निम्न कोड ब्राउज़र में मेरे लिए काम करता है:

HTML:

<input type="file" id="image" accept="image/png"/>

जावास्क्रिप्ट:

const formData = new FormData()

// add a non-binary file
formData.append('files[]', new Blob(['{"hello": "world"}'], { type: 'application/json' }), 'request.json')

// add a binary file
const element = document.getElementById('image')
const file = element.files[0]
formData.append('files[]', file, file.name)
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData)

Comments

इस उदाहरण के लिए बहुत-बहुत धन्यवाद, यह जानने में कठिन समय था कि एकाधिक फ़ाइल अपलोड काम क्यों नहीं कर रही है।

— मिंकेश जैन M

मैं एक विशेषज्ञ नहीं हूँ, लेकिन मेरे मामले में मैं इन जटिलताओं (से बचने में कामयाब रहे concat-stream, asyncऔर awaitका उपयोग करके एकाधिक फ़ाइल अपलोड करने के लिए) for(var x = 0; x<this.state.files.length; x++) { formData.append('files[]', this.state.files[x]) }तो मैं का उपयोग कर प्रस्तुत कर सकते हैंaxios.post(url, formData, config)

— laimison

@ धन्यवाद धन्यवाद, यह मेरे लिए काम करता है। मैंने अपना उत्तर अपडेट कर दिया है।

— टायलर लॉन्ग

@ टायलरलॉन्ग मैं फॉर्मडाटा एपीआई में किसी भी गेटहेडर्स विधि को नहीं ढूंढ सकता। developer.mozilla.org/en-US/docs/Web/API/FormData

— ankur_rajput

Answer 5

और भी सीधा:

axios.post('/addUser',{
    userName: 'Fred',
    userEmail: '[e-mail]'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Comments

हां, जैसा कि लगता है, अगर कोई फ़ाइल अपलोड नहीं है, तो यह सबसे आसान तरीका है।

— अकलंका वीरासूरिया

Answer 6

Axios में एप्लिकेशन / x-www-form-urlencoded प्रारूप का उपयोग करना

डिफ़ॉल्ट रूप से, axios जावास्क्रिप्ट वस्तुओं को JSON में क्रमबद्ध करता है। इसके बजाय एप्लिकेशन / x-www-form-urlencoded प्रारूप में डेटा भेजने के लिए, आप निम्न विकल्पों में से एक का उपयोग कर सकते हैं।

ब्राउज़र

एक ब्राउज़र में, आप URLSearchParams API का उपयोग इस प्रकार कर सकते हैं:

const params = नया URLSearchParams ();

params.append ('param1', 'value1');

params.append ('param2', 'value2');

axios.post ('/ foo', params);

ध्यान दें कि URLSearchParams सभी ब्राउज़रों द्वारा समर्थित नहीं है (caniuse.com देखें), लेकिन एक पॉलीफ़िल उपलब्ध है (वैश्विक वातावरण को पॉलीफ़िल करना सुनिश्चित करें)।

वैकल्पिक रूप से, आप क्ष लाइब्रेरी का उपयोग करके डेटा को एन्कोड कर सकते हैं:

const qs = आवश्यकता ('qs');

axios.post ('/ foo', qs.stringify ({'bar': 123}));

या दूसरे तरीके से (ES6),

'qs' से आयात qs;

const data = {'bar': 123};

const विकल्प = {

विधि: 'पोस्ट',

शीर्ष लेख: {'सामग्री-प्रकार': 'आवेदन / x-www-form-urlencoded'},

डेटा: qststringify (डेटा),

url,};

Axios (विकल्प);

Answer 7

2020 ईएस 6 करने का तरीका

Html में फॉर्म होने से मैं डेटा में बंध जाता हूँ जैसे:

डेटा:

form: {
   name: 'Joan Cap de porc',
   email: '[e-mail]',
   phone: 2323,
   query: 'cap d\ou'
   file: null,
   legal: false
},

ऑनसबमिट:

async submitForm() {
  const formData = new FormData()
  Object.keys(this.form).forEach((key) => {
    formData.append(key, this.form[key])
  })

  try {
    await this.$axios.post('/ajax/contact/contact-us', formData)
    this.$emit('formSent')
  } catch (err) {
    this.errors.push('form_error')
  }
}

Answer 8

उपर्युक्त विधि ने मेरे लिए काम किया लेकिन चूंकि यह कुछ ऐसा था जिसकी मुझे अक्सर आवश्यकता होती थी, इसलिए मैंने फ्लैट ऑब्जेक्ट के लिए एक मूल विधि का उपयोग किया। ध्यान दें, मैं भी Vue का उपयोग कर रहा था और REACT का नहीं

packageData: (data) => {
  const form = new FormData()
  for ( const key in data ) {
    form.append(key, data[key]);
  }
  return form
}

जो तब तक मेरे लिए काम करता था जब तक कि मैं नेस्टेड ऑब्जेक्ट्स और फ़ाइलों के साथ अधिक जटिल डेटा संरचनाओं में भाग नहीं लेता, जो तब निम्न को जाने देते हैं

packageData: (obj, form, namespace) => {
  for(const property in obj) {
    // if form is passed in through recursion assign otherwise create new
    const formData = form || new FormData()
    let formKey

    if(obj.hasOwnProperty(property)) {
      if(namespace) {
        formKey = namespace + '[' + property + ']';
      } else {
        formKey = property;
      }

      // if the property is an object, but not a File, use recursion.
      if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
        packageData(obj[property], formData, property);
      } else {
        // if it's a string or a File
      formData.append(formKey, obj[property]);
      }
    }
  }
  return formData;
}

Comments

objectToFormData अपरिभाषित है और फ़ॉर्मडाटा को इसके बाहर लौटाया जाता है, लेकिन इसके अंदर परिभाषित किया जाता है। formData आसान है, लेकिन objectToFormData क्या माना जाता है?

— ट्रेवर

मुझे लगता है कि इसके कार्य का नाम होना चाहिए। क्योंकि यह, पुनरावर्ती होने के लिए तो मैं मान आप बदल सकते हैं मतलब है objectToFormDataकरने के लिए packageDataया ठीक इसके विपरीत

— रेमंड Ativie

Answer 9

import axios from "axios";
import qs from "qs";   

const url = "https://yourapplicationbaseurl/api/user/authenticate";
    let data = {
      Email: "[e-mail]",
      Password: "Admin@123"
    };
    let options = {
      method: "POST",
      headers: { "content-type": "application/x-www-form-urlencoded" },
      data: qs.stringify(data),
      url
    };
    axios(options)
      .then(res => {
        console.log("yeh we have", res.data);
      })
      .catch(er => {
        console.log("no data sorry ", er);
      });
  };