Axios: काम करने के लिए 'सामग्री-प्रकार': 'मल्टीपार्ट/फॉर्म-डेटा' के साथ एक पोस्ट नहीं मिल सकता है

कोड मुझे अच्छा लग रहा है। (आपको सामग्री-प्रकार सेट करने की आवश्यकता नहीं है, लेकिन यह महत्वपूर्ण नहीं है।) जब आप axios के माध्यम से अनुरोध भेजने का प्रयास करते हैं तो क्या होता है?

मैंने देखा कि सामग्री-प्रकार सेट करना या न करना इस मामले में कुछ भी नहीं बदलता है। जब मैं एक्सिओस के साथ अनुरोध भेजने का प्रयास करता हूं, ऐसा लगता है कि डेटा एक खाली स्ट्रिंग के रूप में जाता है तो बैकएंड लापता पैरामीटर से संबंधित त्रुटि के साथ प्रतिक्रिया देगा।

मैं 0.9.1 का उपयोग कर रहा था लेकिन समस्या 0.11.0 पर बनी हुई है।

कृपया मुझे बताएं कि क्या कुछ और है जो मैं इसे डीबग करने में मदद के लिए कर सकता हूं, ठीक है?
टक्स @nickuraltsev !

क्या आप कृपया इस पर एक नज़र डाल सकते हैं कि आपके अनुरोध क्रोम देव उपकरण नेटवर्क पैनल में कैसे दिखते हैं और यदि संभव हो तो एक स्क्रीनशॉट प्रदान करें?

@nickuraltsev देखें कि क्या यह मदद करता है:

मुझे लगता है कि अनुरोध शीर्षलेख गलत हैं।

तो कोई अनुरोध पेलोड नहीं है?

ठीक है, हमारे पास होना चाहिए लेकिन डेटा एक खाली स्ट्रिंग के रूप में चला जाता है। मुझे नहीं पता कि इसे क्या तोड़ सकता है (कोड को देखते हुए मैंने अपनी पहली पोस्ट पर साझा किया)।

समझा। और देव टूल्स में आपके अनुरोधों के लिए कोई अनुरोध पेलोड अनुभाग नहीं है, है ना?

संभवतः संबंधित शीर्षलेख समस्या। जब सामग्री-प्रकार को अनुरोध में कॉन्फिग ऑब्जेक्ट में सेट किया जाता है तो इसे संक्षिप्त किया जाता है उदा
axios.post(
'https://example.com/login',
{ईमेल पता: ईमेल, पासवर्ड: हैशेडपासवर्ड},
{हेडर: {'सामग्री-प्रकार': 'एप्लिकेशन/जेसन'}}
);

हेडर सामग्री-प्रकार एप्लिकेशन/जेसन, एप्लिकेशन/जेसन के रूप में आता है
इस मामले में शरीर को पार्स नहीं किया जाएगा

@nickuraltsev सही! आप उस स्क्रीनशॉट पर जो देखते हैं वह सब मेरे पास देव टूल्स पर है।
@rrapant सही हो सकता है, लेकिन मुझे पूरा यकीन है कि कम से कम इस मामले में 'Content-Type' सेट करना या नहीं, कुछ भी नहीं बदल रहा था। मुझे सुनिश्चित करने के लिए फिर से जांच करनी होगी।

@rrapant डुप्लिकेट सामग्री प्रकार मानों के साथ समस्या #317 द्वारा तय की गई है। फिक्स को अगली रिलीज़ में शामिल किया जाएगा। आपको धन्यवाद!

@rafaelbiten मैंने अभी इस मुद्दे को पुन: पेश करने का प्रयास किया है लेकिन इसका कोई फायदा नहीं हुआ है। मैंने निम्नलिखित कोड का उपयोग किया:

const data = new FormData();

data.append('action', 'ADD');
data.append('param', 0);
data.append('secondParam', 0);
data.append('file', new Blob(['test payload'], { type: 'text/csv' }));

axios.post('http://httpbin.org/post', data);

डेटा सफलतापूर्वक सर्वर पर भेजा गया था:

@rafaelbiten क्या आप मेरे कोड स्निपेट में FromData के साथ http://httpbin.org/post पर अनुरोध भेजने का प्रयास कर सकते हैं?

इसे अभी के लिए बंद कर रहे हैं। यदि आवश्यक हो तो कृपया फिर से खोलने के लिए स्वतंत्र महसूस करें।

हाय @nickuraltsev , मुझे एक ही समस्या हो रही है।

      var fd = new FormData();
      fd.append('file', this.refs.multipartfiles.files[0]);

            const config = { headers: { 'Content-Type': 'multipart/form-data' } };
            axios.post('/dataAPI/sendFile', {
                "UploadCommand": fd
              }, config)
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });

कृपया मेरी हेडर जानकारी का स्क्रीन शॉट नीचे देखें,

मेरा एक प्रश्न है, _क्या axios नोड सर्वर पर बहु-भाग डेटा फ़ाइलें भेजने का समर्थन करता है?_

@ श्रीखर मुझे नहीं पता कि यह काम करेगा या नहीं, लेकिन क्या आप फॉर्मडाटा को किसी अन्य ऑब्जेक्ट में लपेटने के बजाय दूसरे तर्क के रूप में जोड़ सकते हैं?
axios.post('/dataAPI/sendFile', fd, config)

यदि आपको फ़ाइल के भाग के नाम के रूप में 'अपलोड कमांड' का उपयोग करने की आवश्यकता है, तो आपको इसका उपयोग करने की आवश्यकता है
fd.append('UploadCommand', this.refs.multipartfiles.files[0]);

@yungpanda मुझे ऐसा करने के लिए एक विकल्प मिला। मुझे लगता है कि मुझे अब एपीआई को फिर से बनाना होगा। वैसे भी मैं कोशिश करूँगा और जाँच करूँगा कि क्या यह काम करता है, मैं थ्रेड को अपडेट रखूँगा। आपके जवाब के लिए धन्यवाद।

@श्रीखर ब्राउज़र को मल्टीपार्ट/फॉर्म-डेटा में बदलने और स्वचालित रूप से सीमा जोड़ने के लिए सामग्री-प्रकार को अपरिभाषित पर सेट करें

@nickuraltsev यह एक न्यूनतम उदाहरण है जो नोड पर काम नहीं करता है:

const data = new FormData();

data.append('action', 'ADD');
data.append('param', 0);
data.append('secondParam', 0);

axios.post('http://httpbin.org/post', data).then(req => {
  console.log('Req done: ', req)
}).catch(err => {
  console.error('Error: ', err)
})

त्रुटि: अंत के बाद लिखें

@krzkaczor क्या आपको axios के साथ मल्टीपार्ट/फॉर्म-डेटा भेजने के लिए कोई काम मिला है?

@PierreCavalet नहीं , मैंने इसके बजाय request-promise का उपयोग किया।

@krzkaczor धन्यवाद, भी स्विच करने के लिए मजबूर

@krzkaczor यदि आपने पहले से ऐसा नहीं किया है तो सामग्री-प्रकार में जोड़ने का प्रयास करें

const config = { headers: { 'Content-Type': 'multipart/form-data' } };
let fd = new FormData();
fd.append('file',files[0])
return axios.post("http://localhost:5000/upload", fd, config)

@krzkaczor मैं भी axios और मल्टीपार्ट/फॉर्म-डेटा के साथ एक ही समस्या का सामना कर रहा हूँ। क्या आप अनुरोध-वादे के साथ उपयोग किए गए कोड का सार पोस्ट कर सकते हैं।

@ dan-boa यहाँ आप जाते हैं: https://gist.github.com/krzkaczor/bdbe09d4096b051a3c18387c4ca79a06 यह एक हैक भी दिखाता है कि फ़ाइल के रूप में स्ट्रिंग कैसे भेजें (पथ सेटिंग)

अगर कोई सोच रहा है, तो यहां एक उदाहरण दिया गया है कि FormData के साथ axios का उपयोग कैसे करें। आपको मूल रूप से डेटा को बफर में स्ट्रीम करना होगा और सही हेडर पास करना होगा।

const concat = require("concat-stream")
const fd = new FormData()

fd.append("hello", "world")
fd.append("file", fs.createReadStream(file))
fd.pipe(concat(data => {
  axios.post("/hello", data, {
    headers: fd.getHeaders()
  })
}))

मेरे पास एक ही समस्या थी (ब्राउज़र में, नोड में नहीं)। यदि आप Content-Type हेडर बिल्कुल भी सेट नहीं करते हैं तो यह काम करता है और axios को चीजों को समझने दें (यह भी जांचें कि क्या आप उस हेडर को axios इंटरसेप्टर में भी डिफ़ॉल्ट के रूप में सेट नहीं करते हैं। यदि आपको कुछ चाहिए बाकी एपीआई कॉलों के लिए डिफ़ॉल्ट, आप फॉर्मडाटा () अनुरोधों के लिए एक अलग अक्षीय उदाहरण बना सकते हैं)

किसी अन्य दूरस्थ सर्वर पर अपलोड करने का प्रयास करते समय मैं नोड पक्ष में अनुरोध-वादे के साथ जा रहा था।

मैंने इसी कारण से अनुरोध-वादा पर स्विच किया। प्यार अक्षतंतु अन्यथा!

@guncha आपके उदाहरण ने मेरे लिए 0.15.3 में काम किया, जब तक कि मैंने एक बाइनरी फ़ाइल अपलोड करने का प्रयास नहीं किया, जो यूटीएफ 8 के रूप में एन्कोड किया गया। कॉनकैट को बफर का उपयोग करने के लिए कहने से समस्या ठीक हो गई।

const concat = require("concat-stream")
const fd = new FormData()

fd.append("hello", "world")
fd.append("file", fs.createReadStream(binaryFile))
fd.pipe(concat({encoding: 'buffer'}, data => {
  axios.post("/hello", data, {
    headers: fd.getHeaders()
  })
}))

वैकल्पिक रूप से, मैं एक वादे का उपयोग करूंगा:

const promise = new Promise((resolve) => {
  const fd = new FormData();
  fd.append("hello", "world");
  fd.append("file", fs.createReadStream(binaryFile));
  fd.pipe(concat({ encoding: 'buffer' }, data => resolve({ data, headers: fd.getHeaders() })));
});
promise.then(({ data, headers }) => axios.post('/hello', data, { headers }));

const callApi = (url, params) => {
  const formData  = new FormData()
  for(let name in params) {
    let param = params[name]
    if (typeof param === 'object') {
      param = JSON.stringify(params[name])
    }
    formData.append(name, param)
  }

  return axios.post(url, formData)
    .then(response => {
      console.log(response)
    })
}

@guncha मेरे लिए काम कर रहा है। धन्यवाद

यहाँ एक ही मुद्दा

बस सीमा जोड़ें Content-Type :

const request = require('axios');
const FormData = require('form-data');
const fs = require('fs');

let data = new FormData();
data.append('file1', fs.createReadStream('./image1.jpeg'), 'image1.jpeg');
data.append('file2', fs.createReadStream('./image2.jpeg'), 'image2.jpeg');

let options = {
    method: 'POST',
    url: 'http://localhost:3200/upload',
    headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
    },
    data
};

return request(options)
    .then(response => {
        console.log(response);
    });

अरे,
मुझे यह फ़ाइल जेसन प्रारूप में मिली है, क्या कोई मेरी मदद कर सकता है, मुझे इसे मल्टीपार्ट फ़ाइल में कैसे परिवर्तित करना चाहिए।
इस्तेमाल किया गया प्लेटफॉर्म java8.
"body": "------WebKitFormBoundaryQsJGeBuR8e9dQ4Pm\r\nContent-Disposition: form-data; name=\"file\"; filename=\"backup prolog.txt\"\r\nContent-Type: text/plain\r\n\r\n%All the Pre-Defined relations\r\nconnected(hira,rohit,father).\r\nconnected(rohit,rakesh,father).\r\nconnected(ram,hira,father).\r\nconnected(kavri,hira,mother).\r\nconnected(hira,kavri,son).\r\nconnected(arun,vinayak,father).\r\nconnected(vinayak,arun,son).\r\nconnected(arun,shashi,husband).\r\nconnected(shashi,arun,wife).\r\nconnected(vinayak,vardaan,brother).\r\nconnected(vardaan,vinayak,brother).\r\nconnected(shashi,vinayak,mother).\r\nconnected(vinayak,shashi,son).\r\n\r\n\r\n\r\nconnected2(X,Y,D) :- connected(X,Y,D).\r\n%connected2(X,Y,D) :- connected(Y,X,D).\r\n\r\nnext_node(Current, Next,R, Path) :-connected2(Current, Next, R),not(member(Next, Path)).\r\n\r\nfunc(how,is,X,related,to,Y):-depth_first(X,Y,[X],P),write(P).\r\n%Procedure to Start the depth_first\r\ndepth_first(Goal, Goal, _, [Goal]).\r\n\r\ndepth_first(Start, Goal, Visited, [Start,is,R,of|Path]) :-next_node(Start, Next_node,R, Visited),depth_first(Next_node, Goal,[Next_node,R|Visited], Path).\r\n\r\n\r\n\r\n\r\n\r\n\r\n------WebKitFormBoundaryQsJGeBuR8e9dQ4Pm--\r\n"
धन्यवाद

कोड ब्राउज़र में काम करता है लेकिन नोड पर नहीं।

const fdata = new FormData();
fdata.append('user', u);
fdata.append('hostnames', n.join(' '));
const host = localStorage.getItem('host');
const port = localStorage.getItem('port');
axios({
  url: `http://${host}:${port}/hosts/remove`,
  method: 'post',
  data: fdata
}).then(response => {
  if (response.status === 200) {
    console.log(response.data);
    console.log('Removed host successfully');
  }
  return null;
}).catch(er => console.log(er));

नमस्ते @श्रीखार
मेरे लिए मैंने कॉन्फ़िगरेशन को बदल दिया
const config = { headers: { 'Content-Type': 'application/json' } };
और यह ठीक काम किया

इसके लिए कुछ सुसंगत उत्तर/कार्यप्रवाह होने तक कृपया फिर से खोलें। ऐसा लगता है कि बहुत से लोग अभी भी इसके साथ समस्याओं का सामना कर रहे हैं।

+1 फिर से खोलें

HTTP पोस्ट जिसमें बाइनरी फ़ाइल डेटा शामिल है, axios v0.16.2 . में ठीक काम करता प्रतीत होता है

// The following was tested successfully with axios v0.16.2

// Create a new form.  Note:  could also specify an existing form as
// the parameter to the FormData() constructor to copy all the elements
// from the existing form to the new one being created.

var tempFormData = new FormData();

var someNoteValue = 'Hello World';
var someAudioData = [];  // populate this with data from file, with MediaRecorder() etc.


// Add form fields

tempFormData.set('SomeNote', 'Hello World');
tempFormData.set('SomeRecording', someAudioData[0], 'SampleRecording.webm');


// Optional:  output list of form fields to the console for debugging

for (var pair of tempFormData.entries()) {
    console.log('Form field: ' + pair[0] + ', ' + pair[1]);
}


// Call Axios to post the form to myurl

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

            }

फ़ाइल का प्रतिनिधित्व करने के लिए बफर का उपयोग करते समय, यह मेरे लिए काम करता है:

      const form = new FormData();
      const fileBuffer = new Buffer(
        'MM2 - noticeably shallower than the original - score: 101%', 'utf-8'
      );
      form.append('name', 'reviews.txt'); // additional form data field
      form.append('file', fileBuffer, 'original-file-name.bar');

      const res = await axios.post(`/uploadfile`, form, { headers: form.getHeaders() });

नोट करने के लिए महत्वपूर्ण: उपरोक्त में से कोई भी समाधान काम नहीं करता है यदि आपके पास Axios उदाहरण के डिफ़ॉल्ट में कोई डिफ़ॉल्ट डेटा पैरामीटर सेट है। आप यह भी जांच सकते हैं कि क्या आप अपने Axios इंस्टेंस में एक डिफ़ॉल्ट सामग्री-प्रकार शीर्षलेख निर्दिष्ट करते हैं (axios.defaults.headers और axios.defaults.parameters के माध्यम से)।

यह बिंदु पर नहीं हो सकता है, लेकिन समस्या सर्वर साइड पर body-parser का उपयोग करने से संबंधित हो सकती है। मैं इसी तरह के मुद्दे से जूझ रहा था और इस पोस्ट पर भाग गया:

https://philna.sh/blog/2016/06/13/the-surprise-multipart-form-data/

TL; DR - body-parser मल्टीपार्ट/फॉर्म-डेटा को हैंडल नहीं करता है। दूसरे शब्दों में, axios समस्या नहीं है और body-parser है। यही कारण है कि ऊपर वर्णित बफर समाधान काम करते हैं।

मुझे लगता है कि यह कार्यक्षमता सुरक्षा कारणों से है, जैसा कि यहां बताया गया है:

http://andrewkelley.me/post/do-not-use-bodyparser-with-express-js.html

मुझे आशा है कि यह किसी की मदद करता है!

मेरे साथ भी वही दिक्कत है। मैं Axios 0.16.2 का उपयोग करता हूं और XMLHttpRequest काम करता हूं, लेकिन Axios द्वारा नहीं।

मेरे पास मूल फॉर्मडाटा ऑब्जेक्ट है:

कॉन्स्ट फॉर्मडाटा = नया फॉर्मडाटा ();
formData.append ('नाम', 'टेक्स्टनाम');

मैंने @Janekk के सुझाव की कोशिश की:

axios({
      method: 'post',
      url,
      withCredentials: true,
      data: { formData },
    })

फिर @faalkhah का सुझाव:

const config = { headers: { 'Content-Type': 'application/json' } };
    axios({
      method: 'post',
      url,
      withCredentials: true,
      data: { formData },
      config,
    })

या @askona का सुझाव:

const config = { headers: { 'Content-Type': undefined } };
    axios({
      method: 'post',
      url,
      withCredentials: true,
      data: { formData },
      config,
    })

अनुरोध हैडर application/json है और formData खाली है।

मुझे नहीं पता कि @ demeter-macik फिक्स कैसे करना है, क्योंकि ऐसा लगता है कि यह केवल बैक-एंड में काम करता है https://stackoverflow.com/a/13454425/968379

नमस्ते,
मुझे भी यही समस्या है
क्लाइंट में मेरा कोड
`

    const url = '/file/uploadTest';
    const formData = new FormData();
    formData.append('file', file);
    formData.append('params1', value);
    formData.append('params2', value2)

    const config = {
        headers: {
            'Content-Type': 'multipart/form-data',
        }
    }
    axios.post(url,formData,config)`

सेल सर्वर में, मैं लॉग कंसोल req.body
मैंने पाया, जब मैं 10 बार अनुरोध करता हूं, तो लगभग 3 4 बार सर्वर को शरीर प्राप्त नहीं होता है (शरीर खाली है)।
मैंने क्रोम के devtool में चेक किया है, अनुरोध अभी भी पेलोड में फ़ाइल और बॉडी को प्रसारित करता है।
मुझे अभी भी पता नहीं चला है कि क्यों, लेकिन मेरे पास इसका समाधान है

वह अनुरोध शीर्षलेख है।

`कोड

    const url = '/file/uploadTest';
    const formData = new FormData();
    formData.append('file', file);
    formData.append('params1', value);
    formData.append('params2', value2)
    const config = {
        headers: {
            'Content-Type': 'multipart/form-data',
            'params1': value,
            'params2': value2
        }
    }
    axios.post(url,formData,config)`

हाय @ श्रीखर ,
क्या आपने समस्या का समाधान किया? मुझे समाधान नहीं मिला, क्या कोई मेरी मदद कर सकता है, कृपया।
इसके अलावा, अग्रिम धन्यवाद

नमस्ते,

मैं मल्टीफॉर्मडेटा पोस्ट करने की कोशिश कर रहा हूं (यह एक एज़्टेक्स्ट एसएमएस एपीआई है)
नोड.जेएस के साथ अक्ष का उपयोग करना।

यह निम्नलिखित कोड के लिए अच्छी तरह से काम करता है,
नया वादा वापस करें (फ़ंक्शन (समाधान, अस्वीकार) {

        var request = require("request");
        var options = {
            method: 'POST',
            url: 'https://app.eztexting.com/sending/messages',
            qs: {format: 'json'},
            formData:
                {
                    User: '**',
                    Password: '**',
                    'PhoneNumbers[0]': '8572222***',
                    Message: 'Appointment Reminder',
                    MessageTypeID: '1'
                }
        };
        request(options, function (error, response, body) {
            if (error) {
                console.log(error);
                reject(error);
            }
            else {
                console.log(response);
                resolve(response);
            }

            // console.log(body);
        });

लेकिन यह axios के साथ काम नहीं करता है क्योंकि एसएमएस नहीं भेजा जाता है, लेकिन मुझे निम्नलिखित अनुरोध के लिए 200 के रूप में स्थिति कोड मिलता है: -
var axios = आवश्यकता ('अक्षीय');

         axios.post('https://app.eztexting.com/sending/messages', {
             qs: { format: 'json' },
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded'
             },
             formData:
                 { User: '****',
                     Password: '2sH****5',
                     'PhoneNumbers[0]':'85722******',
                     Message: 'Hello Yahska',
                     MessageTypeID: 1 }
         })
             .then(function (response) {
                 console.log(response);
             })
             .catch(function (error) {
                 console.log(error);
             });

पोस्ट अनुरोध 'अनुरोध' पुस्तकालय के साथ सफल क्यों है और एक्सियोस के साथ नहीं?

क्या आपने कोई हेडर सेट किए बिना डेटा को JSON से फॉर्मडाटा में कनवर्ट करने का प्रयास किया है?
डेटा के लिए शीर्षलेख (अर्थात प्रमाणीकरण शीर्षलेखों के अलावा) को स्वचालित रूप से नियंत्रित किया जाना चाहिए

async function sendMessage(myJSONPayload){
  try{
    const data = convertJSON2FormData(myJSONPayload);

    const response = await axios.post('https://app.eztexting.com/sending/messages', {
  data
});
    console.log(response);
  } catch(ex){
    console error(err);
  }
}

sendMessage ({ User: '****',
                     Password: '2sH****5',
                     'PhoneNumbers[0]':'85722******',
                     Message: 'Hello Yahska',
                     MessageTypeID: 1 }
         });

JSON से फॉर्मडाटा में रूपांतरण के लिए इस उत्तर में कुछ इस तरह का उपयोग करें:

याद रखें कि नेस्टेड कुंजियों को संभालना मुश्किल होता है। उदाहरण के लिए, हमारे बैकएंड पर डेटा भेजते समय यह काम करता है यदि हम उन्हें इस तरह समतल करते हैं:

{a: {b: 2}} --> formData.append("a.b",2)

यहां भी यही समस्या।

बेशक, @michaelscheurer! अनुरोध के शीर्षलेख सेट करना पर्याप्त नहीं है: इसे काम करने के लिए आपको फॉर्मडाटा जमा करना होगा। यह एक ब्राउज़र ऑब्जेक्ट है जिसे अनुरोध के साथ काम करने के लिए सभी उचित सीमाओं के साथ क्रमबद्ध किया जाएगा ... न ही axios और न ही वेनिला जेएस आपके लिए JSON डेटा को फॉर्मडाटा में परिवर्तित करेगा। Axios यह पहचान लेगा कि यह एक फॉर्मडाटा है और आपके लिए हेडर भी सेट करता है, इसलिए आपको वास्तव में उन्हें सेट करने की आवश्यकता नहीं है
मेरे पिछले उत्तर संकेतों का पालन करने का प्रयास करें ...

@Iamuertepeluda
मैंने आपके सुझाव के अनुसार निम्नलिखित चीज़ों की कोशिश की लेकिन कोई भाग्य नहीं, वही व्यवहार जैसा कि मुझे स्थिति 200 ठीक है लेकिन एसएमएस निम्नलिखित अनुरोध के साथ नहीं भेजा जा रहा है
var axios = आवश्यकता ('अक्षीय');

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

    const form = new FormData();

    //fo this jason I created a form
    // formData:
    // {
    //     User: '*****',
    //         Password
    // :
    //     '******',
    //         'PhoneNumbers[0]'
    // :
    //     '8****2763',
    //         Message
    // :
    //     'Appointment Reminder',
    //         MessageTypeID
    // :
    //     '1'
    // }

    form.append('User','****');
    form.append('Password','*****');
    form.append('PhoneNumbers[0]','*****');
    form.append('Message','Appointment Reminder');
    form.append('MessageTypeID','1');


         axios.post('https://app.eztexting.com/sending/messages', form,
    {
        qs: {format: 'json'},
        headers:
        {
                'content-type'
        :
            'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
        }
    }
)
             .then(function (response) {
                 console.log(response);
             })
             .catch(function (error) {
                 console.log(error);
             });

@ रुचि 2729 क्या आप नोड.जेएस या ब्राउज़र का उपयोग कर रहे हैं?

एक ब्राउज़र में आपको const FormData = require('form-data'); की आवश्यकता नहीं है क्योंकि फॉर्मडाटा मूल है।

इसके अलावा हेडर और क्यू सेट किए बिना प्रयास करें, या कोशिश करें

axios.request({
 url: "https://app.eztexting.com/sending/messages"
 type: "post",
 data: form //the instance of FormData of your stub
});

जैसा कि मैंने उल्लेख किया है, इसे ब्राउज़र में स्वचालित रूप से शीर्षलेख सेट करना चाहिए

@ रुचि 2729 मैं देख रहा हूँ कि आप नोड का उपयोग कर रहे हैं, क्षमा करें।
मुझे याद है कि एक बार axios के साथ form-data उपयोग किया था लेकिन मुझे याद नहीं है कि यह वास्तव में काम करता है या नहीं।

लेकिन क्या आप सुनिश्चित हैं कि eztexting के साथ SMS भेजने का यह सही तरीका है? उनके डॉक्स से यह अलग लगता है, जैसे आपको एक एपीआई कुंजी और अपने स्वयं के नोड क्लाइंट का उपयोग करना चाहिए ...

क्या हम इसे फिर से खोल सकते हैं? ऐसा लगता है कि मेरे सहित बहुत से लोग अभी भी इसके खिलाफ उठ रहे हैं। उदाहरण के लिए, यह अनुरोध सर्वर पर एक्सियोस के माध्यम से अपेक्षित रूप से नहीं आता है, लेकिन अगर मैं पोस्टमैन पर उसी फ़ाइल को multipart/form-data के रूप में भेजता हूं, तो सभी काम करते हैं।

संपादित करें: मेरी समस्या बेस 64 एन्कोडेड डेटा-यूरी को फॉर्म-डेटा के रूप में भेजने की कोशिश कर रही थी। अगर कोई और इसी मुद्दे से जूझ रहा है, तो इसे बदलने के लिए यहां कुछ नमूना कोड दिए गए हैं:

async function importCsv(data: CsvImportData): Promise<void> {
    const formData = new FormData();
    const headers = {'Content-Type': 'multipart/form-data'};

    formData.append('csv', dataURItoFile(data.file, `upload_${Date.now()}.csv`));

    try {
      await axios.post('https://example.com/api/upload/csv', formData, {headers});
    } catch(e) {
      console.error(e);
    }
}

function dataURItoFile(dataURI: string, defaultFileName: string): File {
  let byteString: string;
  const [metadata, data] = dataURI.split(',');
  if (/base64$/.test(metadata)) {
    byteString = atob(data);
  } else {
    byteString = unescape(data);
  }

  const mimetype: string = metadata.split(':')[1].split(';')[0];
  const filename: string = (metadata.match(/name\=(.*);/) || [])[1] || defaultFileName;

  let dataView: Uint8Array = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    dataView[i] = byteString.charCodeAt(i);
  }
  return new File([dataView], filename);
}

अरे मैं इस दस्तावेज़ का जिक्र कर रहा हूँ: - https://www.eztexting.com/developers/sms-api-documentation/rest#Sending
एपीआई कुंजी और सभी के लिए आप किस दस्तावेज़ का जिक्र कर रहे हैं?

@ रुचि 2729
क्षमा करें, मैं नेक्समो के साथ भ्रमित हूं, जो एक और एसएमएस सेवा है और नोड के लिए इसका अपना क्लाइंट है

लेकिन वैसे भी, आपके द्वारा संदर्भित दस्तावेज़ के अनुसार, आप format को json पर सेट करके फॉर्मडाटा से बच सकते हैं और axios को JSON पेलोड भेजने दें (आप इसे पेलोड प्रारूप द्वारा हेडर का अनुमान लगा सकते हैं)

https://app.eztexting.com/sending/messages?format=json

मैं इससे बहुत अधिक समय तक जूझता रहा जिसे मैं स्वीकार करना चाहता हूं, इसलिए उम्मीद है कि इससे किसी को मदद मिलेगी। मैं एक्सिस, एक्सप्रेस और एक्सप्रेस-फाइलअपलोड का उपयोग कर रहा हूं। मैं फॉर्मडाटा में जोड़े गए पैरा के साथ नोड पर सफलतापूर्वक अपलोड कर सकता हूं। मैं req.files के साथ फाइलें उठाता हूं और मैं बाकी फॉर्म डेटा को req.body['yourfilename'] के साथ उठाता हूं।

सर्वर (एक्सप्रेस):

router.post('/helper/amazon/upload', function(req, res) { if (!req.files) { return res.status(400).send('No files were uploaded.') } console.log(req.body.filename); return console.log(req.files);

फ्रंट-एंड (अक्षीय)

const formData = new FormData(); formData.append('file', this.validFile); formData.append('filename', 'trails/' + this.$route.params.id.split('-')[0] + '/camping/'); axios.post( /api/helper/amazon/upload , formData, { headers: { 'Content-Type': 'multipart/form-data' } });

परिणाम:

मुझे एक ही समस्या है, मैं देख सकता हूं कि मैं अपने देव उपकरण के साथ फ़ाइल डेटा सफलतापूर्वक भेजता हूं लेकिन मेरे नियंत्रक के अंदर मेरा $ अनुरोध-> फ़ाइल ('फ़ाइल') खाली है
मेरा घटक

फार्म जमा करें() {
this.formData = नया फॉर्मडाटा ();
this.formData.append('file',this.$refs.file.files[0]);
this.formData.append('analysis',this.analyticsForm.analysis);
this.formData.append('_method','PATCH');
axios.post('/analytics',
यह.फॉर्मडेटा
, {हेडर: {'सामग्री-प्रकार': 'मल्टीपार्ट/फॉर्म-डेटा'}})। तब (प्रतिक्रिया => यह। सबमिट किया गया रीडायरेक्ट (गलत,'/स्रोत/'+यह.स्रोत+'/विवरण'+'') )
कैच ((त्रुटि) => कंसोल.लॉग (त्रुटि))
},

मैंने पाया कि फॉर्मडाटा के साथ कुछ भी करना एक समस्या थी, क्योंकि एमवीसी इस तरह से कुछ भी प्राप्त करना पसंद नहीं करता है, क्योंकि आपको सामग्री-प्रकार को multipart/form-data के रूप में निर्दिष्ट करना होगा और जब मैं चाहता था तो यह अपवाद फेंक रहा था if (!Request.Content.IsMimeMultipartContent()) { throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); } की जाँच करें, जैसा कि Microsoft साइट करने के लिए कहती है: https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part- 2

मेरी फ़ाइल को बेस 64 स्ट्रिंग में लाने के लिए बेहतर था:
https://stackoverflow.com/questions/37134433/convert-input-file-to-byte-array/49676679#49676679

यह पोस्ट अधिक प्रासंगिक हो सकता है कि यह कैसे करना है, क्योंकि मैंने इस उदाहरण में ड्रॉपज़ोन का उपयोग किया था:
https://stackoverflow.com/questions/32556664/getting-byte-array-through-input-type-file/49660172#49660172

और मैं इसके बारे में और विस्तार से यहां बताता हूं: https://stackoverflow.com/questions/47574218/converting-from-blob-to-binary-to-save-it-to-mongodb/49660839#49660839

तब मैं एक JSON ऑब्जेक्ट बना सकता था:

const myObj = {
   file = myBase64String,
   title = "myfileTitle.jpg"`
   type = "image/jpeg"`
}

Axios का उपयोग करने के बजाय, मैंने अभी XMLHttpRequest का उपयोग किया है।

 const xhr = new XMLHttpRequest();

और हेडर खोलें और सेट करें:

 xhr.open('POST', '/api/FileUpload/Post', true);
 xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8' );
 xhr.withCredentials = true;

मैंने प्रतिक्रिया कैप्चर करने के लिए onreadystatechange सेट किया है:

xhr.onreadystatechange = (response) =>
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(response.target.responseText);
    }
}

और भेज दें:

 xhr.send(JSON.stringify(myObj));

यदि आप axios का उपयोग करते हैं, तो शायद यह होगा:

try {
    var axios = require('axios');
    const config = {
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
        }
    }
    await axios.post('https://example.com/api/upload/post', myObj, config)
        .then(function (response) {
             console.log(response);
         })
         .catch(function (error) {
             console.log(error);
         });
}
catch(e) { console.log(e); }

एमवीसी पक्ष पर, आपको एक मिलान मॉडल की आवश्यकता है:

public class MyModel {
    public string file { get; set; }
    public string title { get; set; }
    public string type { get; set; }
}

और फिर इसे [FromBody] टैग के साथ अपने पोस्ट कॉल में एक पैरामीटर के रूप में रखें:

[System.Web.Http.HttpPost]
public virtual JsonResult<string> Post([FromBody]MyModel myModelObject)
{
    string strBase64FileString = myModelObject.file;
    string strTitle = myModelObject.title;
    string strFileType = myModelObject.type;

    return Json(JsonConvert.SerializeObject(new { file = myModelObject.file, title = myModelObject.title, myModelObject.type }));
}

आपने जो भेजा है वह आपको वापस मिल जाना चाहिए। ध्यान दें, यदि आप इसे एक परीक्षण के रूप में लागू करते हैं, तो इसे बहुत छोटी फ़ाइल के साथ करें, ताकि आप अपने सिस्टम के ब्राउज़र/मेमोरी को लॉक करने की क्षमता के साथ हमेशा के लिए प्रतीक्षा न करें।

@navyjax2
मैं वैसा ही कर रहा था जैसा आपने कहा था, यह छोटी फ़ाइल के साथ काम कर रहा था लेकिन मुझे बड़ी फ़ाइल (> 250Mo) भेजने की ज़रूरत है, और हाँ यह मेरे ब्राउज़र को लॉक कर रहा था

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

मैं @epferrari से सहमत हूं, कृपया इस मुद्दे को फिर से खोलने पर विचार करें।
क्रोम में फॉर्मडाटा के साथ बेस 64 स्ट्रिंग भेजना ठीक है, लेकिन इसे नोड में अक्षरों के साथ नहीं किया जा सकता है (v8.9.3)।
और यह नोड-लाने के साथ काम करता है ...

const fetch = require('node-fetch')
const axios = require('axios')
const FormData = require('form-data')
const base64Img = require('base64-img')

const b64 = base64Img.base64Sync('./test.jpg').split('base64,')[1]
const form = new FormData()
form.append('b64_data', b64)
const headers = form.getHeaders()

// with node-fetch it worked
fetch('http://some.url', {
  method: 'POST',
  body: form,
  headers,
}).then(res => res.text()).then(console.log).catch(console.log)

// not working with axios
axios({
  method: 'POST',
  url: 'http://some.url',
  data: form,
  headers,
}).then(console.log).catch(console.log)

=== अद्यतन ===
मुझे समझ में नहीं आता, मैं नोड-फ़ेच और एक्सियोस के लिए एक ही हेडर का उपयोग करता हूं, और ऐसा लगता है कि वे सर्वर पर एक ही फॉर्म डेटा पोस्ट करते हैं, वे अलग-अलग कैसे समाप्त होते हैं?
वैसे, असली यूआरएल जो मैं पोस्ट कर रहा हूं वह यहां से आता है, मैं जो कर रहा हूं वह ब्राउज़र के http अनुरोध को नोडज के साथ नकली है, सर्वर पर एक छवि भेजने और एक लिंक वापस पाने के लिए।

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

<input onChange="emitImageInfo(this)" type="file" multiple>

function emitImageInfo($event){
  let files = $event.target.files
  let formData = new FormData();

  for (let i = 0; i < files.length; i++)
      formData.append('image[' + i + ']', files[i])

  axios.post('file/upload', formData)
     .then((result) => { console.log('got it') })
     .catch((err) => { console.log(err) })
}

यह काम किया:

axios.post (लोकलहोस्ट: 3000/आइटम, फॉर्मडाटा, {हेडर: {'सामग्री-प्रकार': 'मल्टीपार्ट/फॉर्म-डेटा'}});

मुझे भी यही समस्या है

गोलांग के साथ काम नहीं कर रहा

Vue में बस एक आसान तरीका खोजें, लेकिन मुझे लगता है कि इसे अन्य स्थितियों में भी इस्तेमाल किया जा सकता है।😀
बैक-एंड: एक्सप्रेस.जेएस और एक्सप्रेस-फाइलअपलोड पैकेज।

<template>
  <div>
    <input type="file"
           name=""
           id="file-upload"
           multiple
           @change="filesChange($event.target.files)">
    <button @click="handleSubmit">Send</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: new FormData(),
    };
  },
  methods: {
    filesChange(fileList) {
      // First: append file to FormData
      Array.from(Array(fileList.length).keys()).map(x => {
        this.formData.append(fileList[x].name, fileList[x]);
      });
    },
    handleSubmit() {
      // Append Text
      this.formData.append('username', 'Jeremy');

      // Append Number: Will be string
      this.formData.append('number', 9527);

      // Append Array: Need to be converted to a string
      this.formData.append('arrData', JSON.stringify([1, 2, 3]));

      // Append Array: Need to be converted to a string
      this.formData.append(
        'objData',
        JSON.stringify({ name: 'Jeremy', age: 28 })
      );

      this.axios({
        method: 'post',
        url: `file/multi-users`,
        data: this.formData,
      }).then(res => {
        console.log(res);
      });
    },
  },
};
</script>

यहां तक ​​कि हम भी इसी मुद्दे का सामना कर रहे थे। सामग्री-प्रकार शीर्षलेख प्रतिक्रिया जावा स्क्रिप्ट से हटा दिया गया था और फिर यह ठीक काम करता था। जब आप सामग्री-प्रकार में स्पष्ट रूप से सेट करते थे तो पहले सीमा निर्धारित नहीं की जा रही थी

संपादित करें: इसके बारे में और पढ़ने के बाद एक्सप्रेस मेरे अंत में मुद्दा था। उम्मीद है कि यह दूसरों के लिए उपयोगी हो सकता है

यहां वही मुद्दा। @nickuraltsev इस मुद्दे को फिर से खोलने की जोरदार सिफारिश करेंगे।

मैं निम्नलिखित कोड का उपयोग कर axios के माध्यम से अपने नोड सर्वर पर एक फ़ाइल पोस्ट करने का प्रयास कर रहा हूं:

let ff = new FileReader();
ff.onload = (ev) => {
      var result = ev.target.result;
      console.log(`result: ${result} of type ${typeof(result)}`);
      axios.post('/test', {
                 file: result
                 })
                 .then((response) => {
                         console.log(`Response: ${response}`)
                  })
                  .catch((err) => {
                        console.log(`Test error: ${err}`);
                   })
}

var sampleFile = //getting the file here
ff.readAsArrayBuffer(sampleFile);

हालांकि अनुरोध का मुख्य भाग सर्वर-साइड पूरी तरह से खाली है

फ़ाइल को सीधे भेजने का प्रयास किया, फ़ाइल को ऐरेबफर के रूप में पढ़ना और फ़ाइल को टेक्स्ट के रूप में पढ़ना (हालांकि पेलोड बहुत बड़ा है) और सभी 3 काम नहीं किया।

दो साल बाद:
समान समस्या...

@ demeter-macik धन्यवाद, सीमा जोड़ने से मेरे लिए काम हुआ: मुस्कान:

    const form = new FormData();
    form.append('email', '[email protected]');
    form.append('phone_no', '63');
    form.append('phone_code', '9179303100');

    if (logo) {
      form.append('logo', logo);
    }

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

यह निश्चित रूप से मेरे लिए काम कर रहा है - सफारी आईओएस सहित सभी ब्राउज़र।

मेरा कोड कुछ इस तरह है:

फ़ंक्शन नमूनापोस्ट (कॉन्फ़िगरेशन) {

// save reference this

let that = this;



// can optionally pull in form fields from an existing HTML form)

let myForm = document.getElementById('myForm');

let myFormData = new FormData(myForm);



// add in data from config.data if applicable

if (config && config.data) {

    that.objToStr(config.data, '', myFormData);



    for (let n2 in config.data) {

        if (config.data.hasOwnProperty(n2)) {

            myFormData.set(n2, config.data[n2]);

        }

    }

}



if (config.binaryFiles && config.binaryFiles.length > 0) {



    for (let i = 0; i < config.binaryFiles.length; i = i + 1) {

        let thisFile = config.binaryFiles[i];

        myFormData.append(thisFile.fieldName, thisFile.binaryData, thisFile.fileName)

    }

}





let axiosConfig = {

    method: 'post',

    url: config.url,

    data: myFormData,



    onUploadProgress: config.onUploadProgress,

};



if (config && config.binaryFiles && config.binaryFiles.length > 0) {

    axiosConfig.headers = {'Content-Type': 'multipart/form-data'};

}

else {

    axiosConfig.headers = {'Content-Type': 'application/x-www-form-urlencoded'};

}



const ax = axios.create();

// note that passing in config to the constructor is broken as of axios v0.19.0-beta.1

// So we work around by passing in config to the request() method



ax.request(axiosConfig)

    .then(function (response) {

        // handle success



        alert(response.data);



    })

};

// कॉल नमूनापोस्ट अपलोड करने के लिए

नमूनापोस्ट({

url: 'async',

data: {somefield: 'some value'}, //note: passes in as form fields



// optionally include array of binary files

binaryFiles: thisFileList

});

से: एंटोनियो वाज़क्वेज़ नोटिफिकेशन @github.com
भेजा गया: मंगलवार, सितंबर 11, 2018 पूर्वाह्न 11:23
प्रति: axios/axios [email protected]
प्रतिलिपि: DavidRueter [email protected] ; टिप्पणी टिप्पणी @noreply.github.com
विषय: पुन: [अक्षीय/अक्षीय] 'सामग्री-प्रकार' के साथ एक .post प्राप्त नहीं कर सकता: काम करने के लिए 'मल्टीपार्ट/फॉर्म-डेटा' (#318)

4 घंटे और सफारी से एक पोस्ट अनुरोध करने के लिए गिनती। अभी भी नहीं हो रहा... क्या बकवास है दोस्तों ??

यहां किसी भी समाधान ने मुझसे काम नहीं किया ... :(

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub https://github.com/axios/axios/issues/318#issuecomment-420371510 पर देखें, या थ्रेड को म्यूट करें https://github.com/notifications/unsubscribe-auth/AFbi6JQBv06LTwL4z3HIAlvXAXDyps1- ks5uZ_9wgaJpZM4Ibm_z । https://github.com/notifications/beacon/AFbi6BSPfwPvNaWPFSdvtLKRYXS1m4uKks5uZ_9wgaJpZM4Ibm_z.gif

इसने मेरे लिए भी काम किया, धन्यवाद @ arvi

ट्विलिओसम्स = एसिंक्स (कोडिगो) => {

var फॉर्मडाटा = आवश्यकता ('फॉर्म-डेटा');
वर एफएस = आवश्यकता ('एफएस');

वर फॉर्म = नया फॉर्मडाटा ();
फॉर्म.एपेंड ('टू', '+524772773737');
फॉर्म.एपेंड ('से', '+737373737');
फॉर्म.एपेंड ('बॉडी', कोडिगो);

कोशिश करो {
चलो axapi = axios की प्रतीक्षा करें (
{
यूआरएल: '2010-04-01/खाता/AC8aa53c907943af79234414bb725c2cd3/Messages.json',
बेसयूआरएल: 'https://api.twilio.com',
शीर्षलेख: {'सामग्री-प्रकार': multipart/form-data; boundary=${form._boundary} ,},
डेटा: फॉर्म,
प्रमाणीकरण: {
उपयोगकर्ता नाम: 'AC8aa53c907943af79234414bb725c2cd3',
पासवर्ड: * ,
},
विधि: 'पोस्ट',
}
)

} कैच (ई) {कंसोल.एरर (ई)}
}

मैं इस पुस्तकालय को भटक ​​रहा हूं अभी भी फॉर्म डेटा पोस्ट के लिए स्वयं लिखित कामकाज की आवश्यकता है ....

किसी भी अद्यतन?

मुझे NodeJS 10.11.0 और Axios 0.18.0 (#1892 देखें) में समान त्रुटि है। मैंने @arvi को ठीक करने की कोशिश की है लेकिन यह काम नहीं करता है।

मेरे लिए, यह काम करता है:

let formData = new FormData(document.querySelector('#form'));

axios.post("/api/xxx", formData).then(console.log).catch(console.error)

और यह काम नहीं करेगा

let formData = new FormData(document.querySelector('#form'));

axios.post("/api/xxx", {data: formData}).then(console.log).catch(console.error)

पोस्टडेटा परम प्रारूप से अवगत रहें (url , FormData) होना चाहिए, न कि (url, {data: FormData})

beforeAll(function (done) {

          //parse form fields
          var parsefields = function(req,res){
            var form = new formidable.IncomingForm();
            form.parse(req, function (err, fields, files) {
              if (err) res.status(404).json(err)
              else res.status(200).json(fields);
            });  
          }

          router.route('parsefields').post(parsefields)

          //start server
          s = express()
          s.use('/',router)
          s.listen(4000,(err)=>{done(err)})
          done()
        });

        it('should parse and return form fields', function (done) {

          const fd = new FormData()
          fd.append('key','value')

          axios({
            method: 'POST',
            url: 'http://localhost:4000/parsefields',
            data: fd,
            headers : fd.getHeaders(),
          }).then(function (res) {
            expect(res).to.exist
            expect(res.body.key).to.equals('value')
          }).catch(err => {
            expect(err).not.to.exist
          })
          done()

        });
});

मुझे एक ही समस्या हो रही है। बिना किसी त्रुटि के 404 प्राप्त करना। फॉर्म पार्सर, एक्सप्रेस और एक्सियोस के लिए दुर्जेय का उपयोग करना।

मुझे नहीं पता कि यह किसी की मदद करता है, लेकिन मैं इस मुद्दे को केवल सफारी पर देख रहा था और इसे फॉर्मडाटा-पॉलीफिल का उपयोग करके ठीक किया। सफारी को मूल रूप से FormData.append() का समर्थन करना चाहिए लेकिन शायद कार्यान्वयन थोड़ा अलग है?

संपादित करें: मैं गलत था: मैं ब्लॉब से बनाए गए यूआरएल का उपयोग कर रहा था। एक बार जब मैंने सही बूँद का उपयोग करना शुरू कर दिया तो सभी ने एक आकर्षण की तरह काम किया!

जब मैं फ़ाइल अपलोड कर सकता हूं तो मुझे ब्लॉब के साथ भी यही समस्या है। ब्लॉब से फ़ाइल में कनवर्ट करना सरल है लेकिन मैं जानना चाहता हूं कि यह एक बग है या मैंने सिंटैक्स की गलत व्याख्या की है:

`` js upload () { let data = new FormData() data.append('file', this.croppedFile) data.append('blob', this.croppedBlob, 'blob.jpeg') axios.post('/api/fp/process/', data, { headers: { 'Accept': टेक्स्ट/सादा',
},
})

croppedFile is derived from croppedBlob with this simple code:
   `   return new File([this.cropImg], this.file.name, { type: this.file.type })`

Firefox dev tools show:

------वेबकिटफॉर्मबाउंड्रीtmInU7WtcHvmgYbc
सामग्री-विस्थापन: प्रपत्र-डेटा; नाम = "बूँद"

------वेबकिटफॉर्मबाउंड्रीtmInU7WtcHvmgYbc
सामग्री-विस्थापन: प्रपत्र-डेटा; नाम = "फ़ाइल"; फ़ाइल नाम = "dscn2950.jpg"
सामग्री-प्रकार: छवि/जेपीईजी

बूँद: http : // लोकलहोस्ट: 8080/9a6446d1-1ca2-4fd3-a6c8-8b36d863c146
------वेबकिटफॉर्मबाउंड्रीtmInU7WtcHvmgYbc--

```
Mozilla formData.append दस्तावेज़ीकरण के अनुसार ऐसा लगता है कि मैं ब्लॉब ऑब्जेक्ट्स का उपयोग कर सकता हूं।

मुझे जो फंस गया वह यह था कि मेरा सर्वर फाइलों को ठीक से संभाल नहीं रहा था, https://www.npmjs.com/package/multer का उपयोग करके इसे ठीक किया

यह मेरे लिए उपयोगी है! धन्यवाद!

यहां मेरे लिए कुछ भी काम नहीं आया क्योंकि मेरा कोड बिल्कुल अच्छा था।
वास्तविक समस्या उस फ़ाइल के साथ थी जिसे मैं विंडोज़ खोज परिणामों से खींच रहा था - क्रोम को वास्तविक स्थान नहीं मिला और इसने संपूर्ण फॉर्मडाटा पार्सिंग को तोड़ दिया। फ़ाइल पर नेविगेट करने और उसे खींचने से समस्या हल हो गई।

नमस्ते,
क्रिप्या मेरि सहायता करे।

पोस्ट https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart HTTP/1.1
प्राधिकरण: वाहक [Your_AUTH_TOKEN]
सामग्री-प्रकार: बहुखण्डीय/संबंधित; सीमा = foo_bar_baz
सामग्री-लंबाई: [NUMBER_OF_BYTES_IN_ENTIRE_REQUEST_BODY]

--foo_bar_baz
सामग्री-प्रकार: एप्लिकेशन/जेसन; वर्णसेट = UTF-8

{
"नाम": "माईऑब्जेक्ट"
}

--foo_bar_baz
सामग्री-प्रकार: छवि/जेपीईजी

[जेपीईजी_डेटा]
--foo_bar_baz--

axios मल्टीपार्ट/संबंधित अनुरोध प्रकार का समर्थन नहीं करता

मेरे लिए यह (मुझे लगता है) घूंट था। क्योंकि मुझे अपने सर्वर पर छोटी फाइलों के साथ त्रुटि मिल रही थी। मैंने डिस्टर्ब फ़ोल्डर से मैन्युअल रूप से सब कुछ हटा दिया, सामग्री प्रकार को अपरिभाषित के रूप में छोड़ दिया और सब कुछ उम्मीद के मुताबिक काम करता है।
तो आपके पास sth जैसा होगा:

formdata.append("selectPaymentType", $scope.extraFields.selectPaymentType);
formdata.append("pickupMethod", $scope.extraFields.selectPickupType);
अनुरोध करने दें = {
विधि: 'पोस्ट',
यूआरएल: बेसयूआरएल + 'ऑर्डर',
डेटा: फॉर्मडेटा,
शीर्षलेख: {
'सामग्री-प्रकार': अपरिभाषित,
'एक्स-एक्सेस-टोकन': $scope.userToken
}
};
$http (अनुरोध)
सफलता (फ़ंक्शन (डी) { })
त्रुटि (फ़ंक्शन () {});

पुनश्च: यह अंश है ... मैं फाइलें भी संलग्न करता हूं और बहुत अधिक फ़ील्ड ...

सर्वर:

var फॉर्म = नया मल्टीपार्टी। फॉर्म ({uploadDir: './uploads/orders/'});

form.parse(req, function(err,fields, files) {
// आपका कोड यहाँ
})

हाय कृपया मुझे मदद की ज़रूरत है: मुझे "फ़ाइल मिली: यह मान खाली नहीं होना चाहिए।" जब मैं भ्रूण का उपयोग करके एक छवि पोस्ट करने का प्रयास करता हूं:
handleSubmit = (event) => { event.preventDefault(); //const { category } = this.state; console.log(this.state.file) let formData = new FormData(); formData.append("file",this.state.file); formData.append("name",this.state.name); alert('You Added a new Category Named ' + this.state.file); fetch(`${process.env.REACT_APP_BASE_URL}/category/image`, { method: 'POST', body: formData }).then(res => res.json()).then(err => console.log(err)); } कंस्ट्रक्टर (प्रॉप्स) {
सुपर (प्रॉप्स);

this.state = {

    name: '',
    file: null
  ,
  isLoaded: false,
  isEditMode: false,

}

}
```

किसी के लिए, इसने मेरे लिए काम किया।
यदि इनपुट फ़ाइल का उपयोग कर रहे हैं, तो अन्य इनपुट फ़ील्ड प्राप्त करने से पहले, आपको अपने राउटर में MULTER का उपयोग करना होगा। पोस्ट ('/') मिडलवेयर की तरह।

अपने axios.create जांचें, इस शीर्षलेख को "शीर्षलेख: {}" चाहिए और डेटा का उपयोग नहीं करना चाहिए। इस तरह:
वर उदाहरण = axios.create({
शीर्षलेख: {
// 'सामग्री-प्रकार': 'एप्लिकेशन/x-www-form-urlencoded; charset=UTF-8',
},
// आंकड़े: {},
पैराम्स: {}
});

आज तक, यह नोडज पर काम नहीं कर रहा है। request-promise दृष्टिकोण ने भी मेरे लिए काम किया।

नोडज में एक्सियोस के साथ काम करने के लिए इसे पाने के लिए 2 दिन बिताए। वास्तव में इसे नोडज में अनुरोध-वादे के साथ काम करने में 30 सेकंड का समय लगा।

मैंने विभिन्न समाधानों की कोशिश की लेकिन अंत में मैंने हेडर जोड़कर इस मुद्दे को संभाला:

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

const form = new FormData()
form.append('foo', 'bar')

await axios.post('http://myserver', form, { headers: form.getHeaders() })

@ गूग्रोश हाँ। हां। हां।

आधा दिन यह पता लगाने में बिताया कि यह क्लाइंट या सर्वर कॉन्फिगरेशन से संबंधित है या नहीं।
अंत में, headers: form.getHeaders() ने चाल चली।

got में ले जाया गया क्योंकि यह formData और multipart/form-data के साथ सिर्फ _works_ - https://github.com/sindresorhus/got
बंद करें, लेकिन सिगार नहीं

  const form = new FormData()
  const stream = fs.createReadStream(file.path)

  form.append('file', stream, file.name)

  try {
    await got.post('http://example.com', { body: form })
  } catch (error) {
    next(error)
  }

आप इसे इस तरह से कर सकते हैं:
हैंडल सबमिट करें = (ई: कोई भी) => {
e.preventDefault ();
कॉन्स्ट डेटा = नया फॉर्मडाटा ();
data.append('product_csv', this.state.csvfile);
एक्सेस करने दें टोकन = लोकलस्टोरेज.गेटइटम ('एक्सेस_टोकन');
अक्षतंतु
पोस्ट ('/ अपलोड', डेटा,
{हेडर:
{'सामग्री-प्रकार': 'मल्टीपार्ट/फॉर्म-डेटा', प्राधिकरण: एक्सेसटोकन}
})
तब (रेस => {
कंसोल.लॉग ('रेस', रेस);
});
};

@ गूग्रोश ब्रिलियंट, .getHeaders() यह मेरे लिए भी काम कर रहा है। मैं आपको नहीं बता सकता कि मैंने इस पर कितने घंटे बिताए। धन्यवाद!

मैं प्रतिक्रिया-मूल का उपयोग कर रहा हूँ। और मैंने rn-fetch-blob का उपयोग करके इस मुद्दे को समाप्त कर दिया। बहुत बुरा :(

मेरे पास एक ही समस्या है, यह बिना किसी फ़ाइल के साधारण फॉर्मडाटा के साथ काम नहीं करता है और .getHeaders() मदद नहीं करता है। "मिला" lib में ले जाया गया जो बस काम करता है। इसका उल्लेख यहां भी किया गया है https://github.com/form-data/form-data/issues/458 (मैं नोड v12 का उपयोग कर रहा हूं)

2020 ES6 करने का तरीका

एचटीएमएल में फॉर्म होने के कारण मैं डेटा में बाध्य हूं:

आंकड़े:

form: {
   name: 'Joan Cap de porc',
   email: '[email protected]',
   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')
  }
}

देखें: https://github.com/axios/axios/issues/789#issuecomment -508114703

प्राप्त करने के अंत में, यदि आप एक्सप्रेस का उपयोग कर रहे हैं, तो आपको multer की आवश्यकता है। बॉडी-पार्सर पार्सिंग मल्टीपार्ट अनुरोधों को संभालता नहीं है।

@DespertaWeb जब कोई फाइल नहीं होती है तो यह काम नहीं करता है।