डेटा बनाने के लिए JS ऑब्जेक्ट कन्वर्ट करें

Question

मैं अपने जेएस ऑब्जेक्ट को कैसे बदल सकता हूं FormData?

मैं ऐसा क्यों करना चाहता हूं इसका कारण, मेरे पास एक वस्तु है जिसे मैंने ~ 100 फॉर्म फील्ड वैल्यू से बाहर बनाया है।

var item = {
   description: 'Some Item',
   price : '0.00',
   srate : '0.00',
   color : 'red',
   ...
   ...
}

अब मुझे अपने फॉर्म में अपलोड फ़ाइल की कार्यक्षमता को जोड़ने के लिए कहा गया है, जो कि JSON के माध्यम से निश्चित रूप से असंभव है और इसलिए मैं आगे बढ़ने की योजना बना रहा हूं FormData। तो क्या ऐसा कोई तरीका है जिससे मैं अपने JS ऑब्जेक्ट को कन्वर्ट कर सकूं FormData?

Comments

क्या आप अपना कार्य / प्रगति साझा कर सकते हैं?

— ऋषिकेश

कैसे के बारे में JSON.stringify ()?

— सनी शर्मा

@ सूनी - यह एक स्ट्रिंग में JSON टेक्स्ट का उत्पादन करेगा। वह कोई FormDataवस्तु नहीं है ।

— क्वेंटिन

हां, आप कर सकते हैं, आप ऑब्जेक्ट्स फॉर्मडैट में जोड़ सकते हैं।

— adeneo

क्या आप हमें दिखा सकते हैं कि फॉर्मडाटा का क्या मतलब है? कोई विशिष्ट प्रारूप?

— सनी शर्मा

Answer 1

यदि आपके पास कोई ऑब्जेक्ट है, तो आप आसानी से एक फॉर्मडाटा ऑब्जेक्ट बना सकते हैं और उस ऑब्जेक्ट से फॉर्मडाटा में नाम और मान जोड़ सकते हैं।

आपने कोई कोड पोस्ट नहीं किया है, इसलिए यह एक सामान्य उदाहरण है;

var form_data = new FormData();

for ( var key in item ) {
    form_data.append(key, item[key]);
}

$.ajax({
    url         : 'http://example.com/upload.php',
    data        : form_data,
    processData : false,
    contentType : false,
    type: 'POST'
}).done(function(data){
    // do stuff
});

MDN पर प्रलेखन में अधिक उदाहरण हैं

Comments

@ लायर - itemओपी द्वारा बनाई गई एक नियमित वस्तु है, इसलिए इसमें कोई भी ऐसा गुण नहीं होना चाहिए जो स्वयं का नहीं है, जब तक कि किसी ने ऑब्जेक्ट कंस्ट्रक्टर पर किसी चीज़ को प्रोटोटाइप करने की गलती नहीं की है, जिस स्थिति में आप मुसीबत की दुनिया में होंगे। , और यह कुछ ऐसा नहीं है जिसके लिए हमें रक्षा करनी चाहिए।

— 14'14

@ जूनियर - यह फॉर्मडटा में सिर्फ कुंजी / मान जोड़े जोड़ रहा है, एक प्रॉपटेड प्रॉपर्टी को जोड़ देगा और कुछ भी Object.keysजवाब नहीं देगा , और इसका उत्तर नहीं है, क्योंकि आपको कुंजी को एक सरणी के रूप में प्राप्त नहीं करना चाहिए, फिर पाने के लिए कुंजियों पर पुनरावृति करें। मान, आपको एक for..inलूप का उपयोग करना चाहिए ।

— एडेनो

बेशक, आपको यह नहीं पता होगा कि सर्वर क्या उम्मीद कर रहा है ... जेएस में ... प्रोबलमेटिक है, इसका समाधान Object.keys () नहीं है, यह hasOwnProperty () हो सकता है, लेकिन यह कम से कम एक चेतावनी होने की जरूरत है।

— लियोर

@ जूनियर - यदि आपका सर्वर किसी POST रिक्वेस्ट में एक और कुंजी / वैल्यू पेयर प्राप्त करता है, तो आप इसे गलत कर रहे हैं। मुझे लगता है कि उत्तर ठीक है, और मैं इसे उपयोग करने के लिए बदलने नहीं जा रहा हूं Object.keysया hasOwnProperty()जैसा कि ऑब्जेक्ट प्रश्न में पोस्ट किया गया है और इसमें से किसी की आवश्यकता नहीं है। कारण जो आप कभी-कभी hasOwnPropertyप्लगइन्स आदि में उपयोग करते देखते हैं , क्योंकि आप कभी नहीं जानते कि कुछ लोग Objectकंस्ट्रक्टर को क्या कर सकते हैं , लेकिन अधिकांश भाग के लिए लोगों को उनके द्वारा बनाई गई वस्तुओं पर विरासत में मिली संपत्ति के लिए परीक्षण नहीं करना चाहिए, यह एक संकेत है कि आप शायद कुछ गलत कर रहे हैं।

— 14'14

@ क्या आप अगले तिनके से हवाई जहाज बनाने का इरादा रखते हैं, उम्मीद है कि वह अधिक वास्तविक हवाई जहाज को आकर्षित करेगा जो आकाश से भोजन छोड़ देगा? यह समझना महत्वपूर्ण है कि एक hasOwnProperty चेक का उपयोग क्यों किया जाता है, सिर्फ यह कहना कि चीजों को "सबसे अच्छा अभ्यास" माना जाता है क्योंकि आप किसी की पढ़ते हैं (अनुमान लगाते हुए, क्रॉकफोर्ड की) पुस्तक आपको बहुत दूर नहीं मिलती है, एक साथी को शिक्षित करने की कोशिश कर रहा है, इसलिए 100 से अधिक बार सदस्य। प्रतिष्ठा और आपके द्वारा दिए गए उत्तरों की संख्या के 100 गुना से भी अधिक आपकी बात की मदद नहीं करता है। इसके अलावा, एक नए तीसरे पक्ष के नाम का उल्लेख करें जो प्रोटोटाइप को बदलता है? वह पद एक अलग समय का है ...

— बेंजामिन ग्रुएनबाम

Answer 2

ES6 और एक अधिक कार्यात्मक प्रोग्रामिंग दृष्टिकोण के साथ @ adeneo का उत्तर इस तरह दिख सकता है:

function getFormData(object) {
    const formData = new FormData();
    Object.keys(object).forEach(key => formData.append(key, object[key]));
    return formData;
}

और वैकल्पिक रूप से उपयोग .reduce()और तीर-कार्य:

getFormData = object => Object.keys(object).reduce((formData, key) => {
    formData.append(key, object[key]);
    return formData;
}, new FormData());

Answer 3

यह फ़ंक्शन ऑब्जेक्ट से फॉर्मडेटा में सभी डेटा जोड़ता है

ES6 संस्करण @ डेवलपर 033 से:

function buildFormData(formData, data, parentKey) {
  if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
    Object.keys(data).forEach(key => {
      buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
    });
  } else {
    const value = data == null ? '' : data;

    formData.append(parentKey, value);
  }
}

function jsonToFormData(data) {
  const formData = new FormData();

  buildFormData(formData, data);

  return formData;
}

const my_data = {
  num: 1,
  falseBool: false,
  trueBool: true,
  empty: '',
  und: undefined,
  nullable: null,
  date: new Date(),
  name: 'str',
  another_object: {
    name: 'my_name',
    value: 'whatever'
  },
  array: [
    {
      key1: {
        name: 'key1'
      }
    }
  ]
};

jsonToFormData(my_data)

jQuery संस्करण:

function appendFormdata(FormData, data, name){
    name = name || '';
    if (typeof data === 'object'){
        $.each(data, function(index, value){
            if (name == ''){
                appendFormdata(FormData, value, index);
            } else {
                appendFormdata(FormData, value, name + '['+index+']');
            }
        })
    } else {
        FormData.append(name, data);
    }
}


var formData = new FormData(),
    your_object = {
        name: 'test object',
        another_object: {
            name: 'and other objects',
            value: 'whatever'
        }
    };
appendFormdata(formData, your_object);

Comments

नाइस

— विवेक डोशी

बहुत अच्छा काम करता है! धन्यवाद! मुझे && !(data instanceof Blob)अपने चित्रों को अपलोड करने के लिए मेरे मामले में भी जोड़ना पड़ा

— क्लेमेंट बेकोनियर

मेरे लिए अच्छी तरह से काम करता है, मैंने कहा कि अगर (टाइपो डेटा === 'ऑब्जेक्ट' && डेटा! == नल) {क्योंकि यह अपवाद फेंक रहा है यदि मान शून्य है

— al000y

ईएस 6 संस्करण के लिए, मैंने && !(Array.isArray(data) && !data.length)"यदि" स्थिति में जोड़ा , या खाली सरणी को हटा दिया जाएगा।

— माटेक्सज़

Answer 4

अन्य उत्तर मेरे लिए अधूरे थे। मैंने @ व्लादिमीर नोवापाशिन उत्तर से शुरुआत की और इसे संशोधित किया। यहाँ चीजें हैं, जो मुझे चाहिए और बग मुझे मिला:

• फ़ाइल के लिए समर्थन
• सरणी के लिए समर्थन
• बग: जटिल ऑब्जेक्ट के अंदर फ़ाइल के .propबजाय के साथ जोड़ा जाना चाहिए [prop]। उदाहरण के लिए, formData.append('photos[0][file]', file)काम करते समय Google क्रोम पर काम नहीं formData.append('photos[0].file', file)किया
• मेरी वस्तु में कुछ गुणों को अनदेखा करें

निम्न कोड IE11 और सदाबहार ब्राउज़रों पर काम करना चाहिए।

function objectToFormData(obj, rootName, ignoreList) {
    var formData = new FormData();

    function appendFormData(data, root) {
        if (!ignore(root)) {
            root = root || '';
            if (data instanceof File) {
                formData.append(root, data);
            } else if (Array.isArray(data)) {
                for (var i = 0; i < data.length; i++) {
                    appendFormData(data[i], root + '[' + i + ']');
                }
            } else if (typeof data === 'object' && data) {
                for (var key in data) {
                    if (data.hasOwnProperty(key)) {
                        if (root === '') {
                            appendFormData(data[key], key);
                        } else {
                            appendFormData(data[key], root + '.' + key);
                        }
                    }
                }
            } else {
                if (data !== null && typeof data !== 'undefined') {
                    formData.append(root, data);
                }
            }
        }
    }

    function ignore(root){
        return Array.isArray(ignoreList)
            && ignoreList.some(function(x) { return x === root; });
    }

    appendFormData(obj, rootName);

    return formData;
}

Comments

केवल सहायक सरणियों, वस्तुओं और फ़ाइलों का उत्तर।

— sotn

नमस्ते, आप फ़ाइल को रूट में क्यों जोड़ते हैं? क्या इसे बच्चे में जोड़ना भी संभव है?

— सेड्रिक अर्नोल्ड

@CedricArnould यह गलतफहमी हो सकती है, लेकिन विधि पुनरावर्ती है, भले ही यह लिखा हो formData.append(root, data), इसका मतलब यह नहीं है कि यह रूट में जोड़ा गया है।

— गुडराडेन

मैं आपके उत्तर को समझता हूं, जब मैं सर्वर में परिणाम प्राप्त करता हूं, तो मुझे अजीब लगता है, मेरे पास फ़ाइलों और डेटा का एक अनूठा संग्रह है। लेकिन मैं एक फाइल में देख सकता हूं नाम यह जानकारी देता है कि यह किस बच्चे से जुड़ा है। शायद समस्या नेट कोर से आती है और यह अपलोड फ़ाइलों को कैसे प्रबंधित करती है। आपके उत्तर के लिए धन्यवाद।

— सेड्रिक अर्नोल्ड

मैं इस का उपयोग करने की कोशिश कर रहा हूँ, लेकिन कोई उपयोग उदाहरण नहीं है। इग्निसलिस्ट परम का अपेक्षित प्रारूप काफी मददगार होगा।

— jpro

Answer 5

नीचे JSON.stringify फ़ंक्शन आज़माएं

var postData = JSON.stringify(item);
var formData = new FormData();
formData.append("postData",postData );

Comments

इसे हासिल करने का यह सबसे अच्छा तरीका है।

— रोब

इसके रख-रखाव में कई बार एरर डिबग के बाद

— स्नो बेस

Answer 6

मेरे पास एक परिदृश्य था जहां नेस्टेड JSON को एक रेखीय फैशन में क्रमबद्ध किया जाना था, जबकि फॉर्म डेटा का निर्माण किया जाता है, क्योंकि यह सर्वरों के मूल्यों की अपेक्षा करता है। तो, मैंने एक छोटा सा पुनरावर्ती कार्य लिखा जो JSON का अनुवाद करता है जो इस प्रकार है:

{
   "orderPrice":"11",
   "cardNumber":"************1234",
   "id":"8796191359018",
   "accountHolderName":"Raj Pawan",
   "expiryMonth":"02",
   "expiryYear":"2019",
   "issueNumber":null,
   "billingAddress":{
      "city":"Wonderland",
      "code":"8796682911767",
      "firstname":"Raj Pawan",
      "lastname":"Gumdal",
      "line1":"Addr Line 1",
      "line2":null,
      "state":"US-AS",
      "region":{
         "isocode":"US-AS"
      },
      "zip":"76767-6776"
   }
}

कुछ इस तरह से:

{
   "orderPrice":"11",
   "cardNumber":"************1234",
   "id":"8796191359018",
   "accountHolderName":"Raj Pawan",
   "expiryMonth":"02",
   "expiryYear":"2019",
   "issueNumber":null,
   "billingAddress.city":"Wonderland",
   "billingAddress.code":"8796682911767",
   "billingAddress.firstname":"Raj Pawan",
   "billingAddress.lastname":"Gumdal",
   "billingAddress.line1":"Addr Line 1",
   "billingAddress.line2":null,
   "billingAddress.state":"US-AS",
   "billingAddress.region.isocode":"US-AS",
   "billingAddress.zip":"76767-6776"
}

सर्वर प्रपत्र डेटा को स्वीकार करेगा जो इस परिवर्तित प्रारूप में है।

यहाँ समारोह है:

function jsonToFormData (inJSON, inTestJSON, inFormData, parentKey) {
    // http://stackoverflow.com/a/22783314/260665
    // Raj: Converts any nested JSON to formData.
    var form_data = inFormData || new FormData();
    var testJSON = inTestJSON || {};
    for ( var key in inJSON ) {
        // 1. If it is a recursion, then key has to be constructed like "parent.child" where parent JSON contains a child JSON
        // 2. Perform append data only if the value for key is not a JSON, recurse otherwise!
        var constructedKey = key;
        if (parentKey) {
            constructedKey = parentKey + "." + key;
        }

        var value = inJSON[key];
        if (value && value.constructor === {}.constructor) {
            // This is a JSON, we now need to recurse!
            jsonToFormData (value, testJSON, form_data, constructedKey);
        } else {
            form_data.append(constructedKey, inJSON[key]);
            testJSON[constructedKey] = inJSON[key];
        }
    }
    return form_data;
}

मंगलाचरण:

        var testJSON = {};
        var form_data = jsonToFormData (jsonForPost, testJSON);

मैं केवल परिवर्तित परिणामों को देखने के लिए testJSON का उपयोग कर रहा हूं क्योंकि मैं form_data की सामग्री को निकालने में सक्षम नहीं होगा। AJAX पोस्ट कॉल:

        $.ajax({
            type: "POST",
            url: somePostURL,
            data: form_data,
            processData : false,
            contentType : false,
            success: function (data) {
            },
            error: function (e) {
            }
        });

Comments

हाय राज, कैसे सरण के बारे में? कहें कि आपके पास 1 से अधिक बिलिंग पते हैं। आप इसे कैसे ठीक करेंगे?

— सैम

मुझे जवाब मिल गया है! आपकी पोस्ट वास्तव में मददगार है। धन्यवाद!

— सैम

Answer 7

देर से जवाब के लिए क्षमा करें, लेकिन मैं इस बात से जूझ रहा था क्योंकि कोणीय 2 वर्तमान में फ़ाइल अपलोड का समर्थन नहीं करता है। तो, यह करने का तरीका एक XMLHttpRequestसाथ भेज रहा था FormData। इसलिए, मैंने इसे करने के लिए एक फंक्शन बनाया। मैं टाइपस्क्रिप्ट का उपयोग कर रहा हूं । इसे जावास्क्रिप्ट में बदलने के लिए डेटा प्रकार की घोषणा को हटा दें।

/**
     * Transforms the json data into form data.
     *
     * Example:
     *
     * Input:
     * 
     * fd = new FormData();
     * dob = {
     *  name: 'phone',
     *  photos: ['myphoto.jpg', 'myotherphoto.png'],
     *  price: '615.99',
     *  color: {
     *      front: 'red',
     *      back: 'blue'
     *  },
     *  buttons: ['power', 'volup', 'voldown'],
     *  cameras: [{
     *      name: 'front',
     *      res: '5Mpx'
     *  },{
     *      name: 'back',
     *      res: '10Mpx'
     *  }]
     * };
     * Say we want to replace 'myotherphoto.png'. We'll have this 'fob'.
     * fob = {
     *  photos: [null, <File object>]
     * };
     * Say we want to wrap the object (Rails way):
     * p = 'product';
     *
     * Output:
     *
     * 'fd' object updated. Now it will have these key-values "<key>, <value>":
     *
     * product[name], phone
     * product[photos][], myphoto.jpg
     * product[photos][], <File object>
     * product[color][front], red
     * product[color][back], blue
     * product[buttons][], power
     * product[buttons][], volup
     * product[buttons][], voldown
     * product[cameras][][name], front
     * product[cameras][][res], 5Mpx
     * product[cameras][][name], back
     * product[cameras][][res], 10Mpx
     * 
     * @param {FormData}  fd  FormData object where items will be appended to.
     * @param {Object}    dob Data object where items will be read from.
     * @param {Object =   null} fob File object where items will override dob's.
     * @param {string =   ''} p Prefix. Useful for wrapping objects and necessary for internal use (as this is a recursive method).
     */
    append(fd: FormData, dob: Object, fob: Object = null, p: string = ''){
        let apnd = this.append;

        function isObj(dob, fob, p){
            if(typeof dob == "object"){
                if(!!dob && dob.constructor === Array){
                    p += '[]';
                    for(let i = 0; i < dob.length; i++){
                        let aux_fob = !!fob ? fob[i] : fob;
                        isObj(dob[i], aux_fob, p);
                    }
                } else {
                    apnd(fd, dob, fob, p);
                }
            } else {
                let value = !!fob ? fob : dob;
                fd.append(p, value);
            }
        }

        for(let prop in dob){
            let aux_p = p == '' ? prop : `${p}[${prop}]`;
            let aux_fob = !!fob ? fob[prop] : fob;
            isObj(dob[prop], aux_fob, aux_p);
        }
    }

Comments

[]एक अक्षीय सरणी के अंदर वस्तु गुणों के बजाय सरणी अनुक्रमित को अक्षुण्ण

— बनाए रखने के

Answer 8

टाइपस्क्रिप्ट संस्करण:

static convertModelToFormData(model: any, form: FormData = null, namespace = ''): FormData {
    let formData = form || new FormData();
    for (let propertyName in model) {
      if (!model.hasOwnProperty(propertyName) || model[propertyName] == undefined) continue;
      let formKey = namespace ? `${namespace}[${propertyName}]` : propertyName;
      if (model[propertyName] instanceof Date) {        
        formData.append(formKey, this.dateTimeToString(model[propertyName]));
      }
      else if (model[propertyName] instanceof Array) {
        model[propertyName].forEach((element, index) => {
          if (typeof element != 'object')
            formData.append(`${formKey}[]`, element);
          else {
            const tempFormKey = `${formKey}[${index}]`;
            this.convertModelToFormData(element, formData, tempFormKey);
          }
        });
      }
      else if (typeof model[propertyName] === 'object' && !(model[propertyName] instanceof File)) {        
        this.convertModelToFormData(model[propertyName], formData, formKey);
      }
      else {        
        formData.append(formKey, model[propertyName].toString());
      }
    }
    return formData;
  }

https://gist.github.com/Mds92/091828ea857cc556db2ca0f991fee9f6

Comments

सबसे पहले, namespaceमें एक आरक्षित कीवर्ड है TypeScript( टाइपस्क्रिप्टlang.org/docs/handbook/namespaces.html और github.com/Microsoft/TypeScript/issues/… )। इसके अलावा, ऐसा लगता है कि आप से निपटने के लिए भूल गया Fileपिछले के बाद से elseइच्छा append "[object File]"के लिए formData।

— जिरका जूला

Answer 9

आप बस स्थापित कर सकते हैं qs:

npm i qs

बस आयात करें:

import qs from 'qs'

वस्तु को पास करें qs.stringify():

var item = {
   description: 'Some Item',
   price : '0.00',
   srate : '0.00',
   color : 'red',
   ...
   ...
}

qs.stringify(item)

Answer 10

रिकर्सिवली

const toFormData = (f => f(f))(h => f => f(x => h(h)(f)(x)))(f => fd => pk => d => {
  if (d instanceof Object) {
    Object.keys(d).forEach(k => {
      const v = d[k]
      if (pk) k = `${pk}[${k}]`
      if (v instanceof Object && !(v instanceof Date) && !(v instanceof File)) {
        return f(fd)(k)(v)
      } else {
        fd.append(k, v)
      }
    })
  }
  return fd
})(new FormData())()

let data = {
  name: 'John',
  age: 30,
  colors: ['red', 'green', 'blue'],
  children: [
    { name: 'Max', age: 3 },
    { name: 'Madonna', age: 10 }
  ]
}
console.log('data', data)
document.getElementById("data").insertAdjacentHTML('beforeend', JSON.stringify(data))

let formData = toFormData(data)

for (let key of formData.keys()) {
  console.log(key, formData.getAll(key).join(','))
  document.getElementById("item").insertAdjacentHTML('beforeend', `<li>${key} = ${formData.getAll(key).join(',')}</li>`)
}

<p id="data"></p>
<ul id="item"></ul>

Comments

सबसे अच्छा जवाब imho

— लिंग

Answer 11

यह विधि एक JS ऑब्जेक्ट को FormData में रूपांतरित करती है:

function convertToFormData(params) {
    return Object.entries(params)
        .reduce((acc, [key, value]) => {
            if (Array.isArray(value)) {
                value.forEach((v, k) => acc.append(`${key}[${k}]`, value));
            } else if (typeof value === 'object' && !(value instanceof File) && !(value instanceof Date)) {
                Object.entries(value).forEach((v, k) => acc.append(`${key}[${k}]`, value));
            } else {
                acc.append(key, value);
            }

            return acc;
        }, new FormData());
}

Comments

बस पुनरावृत्ति नेस्टेड ऑब्जेक्ट एंट्री कॉल को ठीक करें: Object.entries(value).forEach((v, k) => acc.append(`${key}[${v[0]}]`, v[1]));

— हेबर जेंटिलिन

Answer 12

मेरे मामले में मेरी वस्तु में भी संपत्ति थी जो फाइलों की सरणी थी। चूंकि वे द्विआधारी हैं, उन्हें अलग तरह से निपटा जाना चाहिए - सूचकांक को कुंजी का हिस्सा बनने की आवश्यकता नहीं है। इसलिए मैंने @Vladimir Novopashin और @ developer033 का उत्तर संशोधित किया:

export function convertToFormData(data, formData, parentKey) {
  if(data === null || data === undefined) return null;

  formData = formData || new FormData();

  if (typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
    Object.keys(data).forEach(key => 
      convertToFormData(data[key], formData, (!parentKey ? key : (data[key] instanceof File ? parentKey : `${parentKey}[${key}]`)))
    );
  } else {
    formData.append(parentKey, data);
  }

  return formData;
}

Answer 13

मैंने इसका उपयोग फॉर्म डेटा के रूप में पोस्ट ऑब्जेक्ट ऑब्जेक्ट के लिए किया था।

const encodeData = require('querystring');

const object = {type: 'Authorization', username: 'test', password: '123456'};

console.log(object);
console.log(encodeData.stringify(object));

Answer 14

हो सकता है कि आप इसे ढूंढ रहे हों, एक कोड जो आपकी जावास्क्रिप्ट ऑब्जेक्ट को प्राप्त करता है, उससे एक फॉर्मडैट ऑब्जेक्ट बनाएं और फिर नए फ़ेच एपीआई का उपयोग करके इसे अपने सर्वर पर पोस्ट करें :

    let myJsObj = {'someIndex': 'a value'};

    let datos = new FormData();
    for (let i in myJsObj){
        datos.append( i, myJsObj[i] );
    }

    fetch('your.php', {
        method: 'POST',
        body: datos
    }).then(response => response.json())
        .then(objson => {
            console.log('Success:', objson);
        })
        .catch((error) => {
            console.error('Error:', error);
        });

Answer 15

मैं गुडराडिन के उत्तर से इसका संदर्भ देता हूं । मैं इसे टाइपस्क्रिप्ट प्रारूप में थोड़ा संपादित करता हूं।

class UtilityService {
    private appendFormData(formData, data, rootName) {

        let root = rootName || '';
        if (data instanceof File) {
            formData.append(root, data);
        } else if (Array.isArray(data)) {
            for (var i = 0; i < data.length; i++) {
                this.appendFormData(formData, data[i], root + '[' + i + ']');
            }
        } else if (typeof data === 'object' && data) {
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    if (root === '') {
                        this.appendFormData(formData, data[key], key);
                    } else {
                        this.appendFormData(formData, data[key], root + '.' + key);
                    }
                }
            }
        } else {
            if (data !== null && typeof data !== 'undefined') {
                formData.append(root, data);
            }
        }
    }

    getFormDataFromObj(data) {
        var formData = new FormData();

        this.appendFormData(formData, data, '');

        return formData;
    }
}

export let UtilityMan = new UtilityService();

Answer 16

मुझे पार्टी में थोड़ी देर हो सकती है, लेकिन यह मैंने एक विलक्षण वस्तु को फॉर्मडाटा में बदलने के लिए बनाया है।

function formData(formData, filesIgnore = []) {
  let data = new FormData();

  let files = filesIgnore;

  Object.entries(formData).forEach(([key, value]) => {
    if (typeof value === 'object' && !files.includes(key)) {
      data.append(key, JSON.stringify(value) || null);
    } else if (files.includes(key)) {
      data.append(key, value[0] || null);
    } else {
      data.append(key, value || null);
    }
  })

  return data;
}

यह कैसे काम करता है? यह कनवर्ट करेगा और सभी संपत्तियों की वापसी करेगा, जो फ़ाइल ऑब्जेक्ट्स को आपने अनदेखा सूची (2 तर्क) में सेट किया है। यदि कोई मुझे यह निर्धारित करने का एक बेहतर तरीका बता सकता है जो मदद करेगा!) का उपयोग करके एक जोंस स्ट्रिंग में JSON.stringify। फिर अपने सर्वर पर आपको इसे वापस JSON ऑब्जेक्ट में बदलने की आवश्यकता होगी।

उदाहरण:

let form = {
  first_name: 'John',
  last_name: 'Doe',
  details: {
    phone_number: 1234 5678 910,
    address: '123 Some Street',
  },
  profile_picture: [object FileList] // set by your form file input. Currently only support 1 file per property.
}

function submit() {
  let data = formData(form, ['profile_picture']);

  axios.post('/url', data).then(res => {
    console.log('object uploaded');
  })
}

मैं अभी भी Http अनुरोधों और जावास्क्रिप्ट के लिए नया हूँ इसलिए किसी भी प्रतिक्रिया अत्यधिक सराहना की जाएगी!

Answer 17

Obj2fd => https://www.npmjs.com/package/obj2fd आज़माएं

import obj2fd from 'obj2fd'

let data = {a:1, b:2, c:{ca:1}};
let dataWithFormData = obj2fd(data);
//result => [a=>1, b=>2, c=>[ca=>1]]