axios 🚀 - Axios प्रतिक्रिया-मूल में प्रपत्र डेटा नहीं भेजते हैं

@corujoraphael जिज्ञासा से बाहर, क्या यह अनुरोध पहले काम कर रहा था?

pedpess 30 जन॰ 2018

@corujoraphael मुझे यकीन नहीं है कि आपका कोड इस तरह चलता है। जिस कॉन्फ़िगरेशन में आप अपने हेडर निर्दिष्ट करते हैं वह एक ऑब्जेक्ट होना चाहिए, लेकिन इसमें घुंघराले ब्रेस गुम है:

(newData) => {
  const data = new FormData();
  data.append('name', 'raphael');
  data.append('file', {
    uri: newData.image.path,
    type: 'image/jpeg',
    name: 'teste'
  });

  return axios.post(
    `${constants.development.URL_API}/file`,
    data, 
    { 
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    },
  )
}

चूंकि इस मुद्दे को कोई प्रतिक्रिया नहीं मिली है और यह हमारे पास मौजूद जानकारी के आधार पर एक एक्सियोस बग की तरह नहीं दिखता है, इसलिए मैं इस मुद्दे को बंद कर रहा हूं।

यदि आपको अपने कोड को डीबग करने में और सहायता की आवश्यकता है, तो कृपया स्टैक ओवरफ़्लो , Gitter पर पोस्ट करें या इस मुद्दे पर फिर से टिप्पणी करें।

धन्यवाद!

emilyemorehouse 11 फ़र॰ 2018

🎉6

@emilyemorehouse , मुझे रिएक्ट नेटिव फॉर्मडाटा का उपयोग करके एक ही समस्या का सामना करना पड़ा

let s = JSON.stringify({ uri: localUri, name: filename, type: type });
let formData = new FormData();
formData.append('ph0t0', s);

axios.post("http://10.0.1.2:8888/uploadphoto", {
        method: "POST",
        headers: {
                'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
        },
        body: formData,
}).then((resp) => {
        console.log(resp);
}).catch(err => {
        console.log(err);
});

कुछ कुंजी की अपेक्षा करें मूल्य जोड़े मौजूद हैं

2018/02/20 18:25:31.740 [डब्ल्यू] [photo.go:411] अनुरोध। मल्टीपार्टफॉर्म: शून्य
2018/02/20 18:25:31.740 [डब्ल्यू] [photo.go:412] अनुरोध प्रपत्र: नक्शा[]
2018/02/20 18:25:31.740 [डब्ल्यू] [photo.go:413] अनुरोध।
2018/02/20 18:25:31.740 [डब्ल्यू] [photo.go:410] अनुरोध: &{POST /uploadphoto/dialog/57120e8951c643ab42a8c19f/00000000000000000000001 HTTP/1.1 1 1 नक्शा[सामग्री-प्रकार:[आवेदन/json;charset =utf-8] उपयोगकर्ता-एजेंट:[okhttp/3.6.0] स्वीकार करें:[एप्लिकेशन/जेसन, टेक्स्ट/सादा, / ] सामग्री-लंबाई: [419] कनेक्शन: [कीप-जिंदा] स्वीकार-एन्कोडिंग: [gzip] कुकी:[lang=zh-TW; PVsessionID=db9a21d63b2d0ea47b68fa8755bd87e2]] 0xc420e3cb80419 [] झूठा 10.0.1.2:8888 नक्शा [] नक्शा []नक्शा[] 10.0.1.3:46904 /अपलोडफोटो/संवाद/57120ई8951सी643एबी42ए8सी19एफ/0000000000000000000000010xc420e3cb40}
2018/02/20 18:25:31.740 [ई] [photo.go:425] [अपलोडफोटो] त्रुटि: अनुरोध सामग्री-प्रकार मल्टीपार्ट/फॉर्म-डेटा नहीं है

संस्करण की जानकारी
अक्ष: 0.16.2
एक्सपो: 25.0.0
प्रतिक्रिया: 16.2.0
प्रतिक्रिया-मूल: 0.52.0

Ernie6711 20 फ़र॰ 2018

👍1

यह बग अभी भी नवीनतम अक्षों के साथ होता है, इसे बंद क्यों किया गया?

giladno 9 मार्च 2018

👍14

अगर कोई प्रतिलिपि प्रस्तुत करने योग्य उदाहरण प्रदान कर सकता है, तो मुझे इसे बैक अप खोलने में खुशी हो रही है।

@ Ernie6711 ऐसा लगता है कि आपको अपने कोड में कोई त्रुटि है - मुझे नहीं लगता कि आपको फ़ाइल डेटा को अपने फॉर्म डेटा में जोड़ने से पहले स्ट्रिंग करना चाहिए। साथ ही, axios.post के तर्क हैं axios.post(url[, data[, config]])

यहां आपके कोड के आधार पर एक उदाहरण दिया गया है:

const file ={ uri: localUri, name: filename, type: type};
const formData = new FormData();
formData.append('file', s);

const config = {
        headers: {
                'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
        }
};

axios.post("http://10.0.1.2:8888/uploadphoto", formData, config).then((resp) => {
        console.log(resp);
}).catch(err => {
        console.log(err);
});

emilyemorehouse 9 मार्च 2018

@emilyemorehouse कृपया

POST /myserver HTTP/1.1
Content-Type: multipart/form-data

_parts=USERX%2Cusername&_parts=FILE1%2C%5Bobject%20Object%5D

giladno 9 मार्च 2018

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

मेरा अनुमान है कि अगर अपलोड में कुछ गड़बड़ है, तो ऐसा इसलिए है क्योंकि प्रपत्र डेटा ऑब्जेक्ट में जोड़ा गया डेटा मान्य नहीं है।

emilyemorehouse 9 मार्च 2018

@emilyemorehouse फ़ाइल अपलोड ब्राउज़र वातावरण में पूरी तरह से काम करते हैं, वे केवल मूल प्रतिक्रिया पर विफल होते हैं। जैसा कि आपने स्वयं का उल्लेख किया है - आपके परीक्षण प्रतिक्रिया मूल वातावरण से बाहर थे, मैं वहां से शुरू करूंगा :)

प्रतिक्रिया देशी में एक साधारण फ़ाइल अपलोड करने का प्रयास करें और बस वायरशार्क निशान की जांच करें, आपको एक काम करने वाले सर्वर की भी आवश्यकता नहीं है ...

giladno 9 मार्च 2018

👍9

मुझे वही मिला, Axios देशी प्रतिक्रिया पर नहीं है

duongtranpyco 16 मार्च 2018

@duongtranpyco मैंने अपने प्रोजेक्ट से axios हटा दिए हैं, मैंने इसके बजाय अपना खुद का सरल वर्ग लिखा है, आनंद लें!

PS यदि आप मुख्य रूप से JSON भेज रहे हैं, तो कोड को संशोधित करें। मेरे मामले में, सर्वर आमतौर पर एक फॉर्म की अपेक्षा करता है।

const request = async ({url, method = 'GET', params, body, responseType = 'json', headers = {}})=>{
    const escape = (data, encode = encodeURIComponent)=>Object.keys(data||{}).reduce((pairs, key)=>{
        for (let value of [].concat(data[key]))
            pairs.push([`${key}`, `${value}`]);
        return pairs;
    }, []).map(pair=>pair.map(encode).join('=')).join('&');

    if (Object.keys(params||{}).length)
        url += '?'+escape(params);
    if (method=='POST' && typeof body=='object')
    {
        if (body instanceof FormData)
            headers['Content-Type'] = 'multipart/form-data';
        else
        {
            body = escape(body);
            headers['Content-Type'] = 'application/x-www-form-urlencoded';
        }
    }
    let {statusCode, request: req} = await new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.withCredentials = true;
        xhr.responseType = {json: 'text'}[responseType]||responseType;
        xhr.onload = ()=>resolve({statusCode: xhr.status, request: xhr});
        xhr.onerror = ()=>reject(new TypeError('Network request failed'));
        xhr.ontimeout = ()=>reject(new TypeError('Network request timed out'));
        for (let key in headers)
            xhr.setRequestHeader(key, headers[key]);
        xhr.send(body||null);
    });
    if (statusCode<200 || statusCode>=400)
        throw new Error(`network request failed with ${statusCode}: ${url}`);
    switch(responseType)
    {
        case 'json':
            return JSON.parse(req.responseText);
        case 'text':
            return req.responseText;
        case 'request':
            return req;
    }
    return req.response;
};

request.get = (url, opt = {})=>request({...opt, url, body: null});
request.post = (url, ...args)=>request({...args[1]||{}, url, method: 'POST', body: args[0]});

giladno 17 मार्च 2018

🎉5

हाय, मुझे एक ही समस्या का सामना करना पड़ रहा है। क्या किसी को समाधान मिला है?

jlariza 19 अप्रैल 2018

👍2

दूसरा @giladno। चूंकि मैं अन्य भागों पर आगे बढ़ रहा हूं, इसलिए मैं इसके बजाय वर्कअराउंड का उपयोग करता हूं: छवियों को अपलोड करते समय लाने () के साथ एक विशिष्ट फ़ंक्शन लिखें।

पहले प्रयास किया गया और न ही डेटा या तर्कों को सख्त करने से परिणाम प्रभावित होता है। सर्वर ने कॉल रिसीव किया लेकिन कोई डेटा नहीं भेजा।

Ernie6711 20 अप्रैल 2018

👍3 👎1

@ Ernie6711 जाहिर तौर पर हेडर दूषित हैं और इसीलिए सर्वर फॉर्म डेटा को स्वीकार करने में असमर्थ है। मैंने फ़ेच() के साथ वर्कअराउंड लागू किया और इसने बिना किसी समस्या के काम किया।

jlariza 24 अप्रैल 2018

मुझे प्रतिक्रिया-मूल में कुछ समस्या थी।
समस्या हेडर नहीं हैं।
वेब में हमारे पास उदाहरण के लिए हो सकता है:

let formData = new FormData()
formData.append('key', true // bool value)

लेकिन मूल निवासी प्रतिक्रिया में कुंजी के लिए मान स्ट्रिंग होना चाहिए।

formData.append('key', 'true')

caciobanita 9 जून 2018

🎉2

जब मैं एक यूआरएल पर पोस्ट करता हूं तो मेरे पास प्रतिक्रिया मूल पर एक ही समस्या होती है, जैसा कि @giladno उल्लेख करता है, आपको मूल प्रतिक्रिया में परीक्षण करना चाहिए और आप उस त्रुटि को सत्यापित कर सकते हैं जो लोग @emilyemorehouse की रिपोर्ट करते हैं। मैं 14 दिन पहले एक त्रुटि की रिपोर्ट करता हूं https://github.com/axios/axios/issues/1618 , लेकिन किसी ने जवाब नहीं दिया है, कृपया अपने पुस्तकालय के रीडमी में वर्णन करें कि आपके पास प्रतिक्रिया मूल पर अक्ष के लिए समर्थन नहीं है, ताकि कई डेवलपर्स समय बर्बाद नहीं करते..!

brayanL 4 जुल॰ 2018

👍5

हां, मैं दिशा की सराहना करता हूं लेकिन "केवल रिएक्ट नेटिव में एक फ़ाइल अपलोड का परीक्षण करें" इतना आसान नहीं है। मैं अक्सर रिएक्ट नेटिव में काम नहीं करता और परीक्षण के लिए फ़ाइल अपलोड के साथ एक प्रोजेक्ट को स्पिन करने में काफी समय लगेगा।

मेरे पास फॉर्म डेटा के साथ एक साधारण पोस्ट है जो मूल निवासी प्रतिक्रिया में काम करता है:

    const formData = new FormData();
    formData.append("data", true);

    const config = {
      headers: {
        "Content-Type": "multipart/form-data; charset=utf-8;"
      }
    };

    axios.post(URL, formData, config).then(
      response => {
        console.log({ response });
      },
      error => {
        console.log({ error });
      }
    );

true सर्वर पर भेजे जाने पर कड़े हो जाते हैं, जो दिलचस्प है।

उस ने कहा, अगर कोई ऐसा उदाहरण प्रदान कर सकता है जिसे मैं आसानी से बना सकता हूं, तो मुझे इस पर और गौर करने में खुशी होगी।

emilyemorehouse 4 जुल॰ 2018

👎6 👍5 🚀1 😕1 🎉1

@corujoraphael आपने इसे कैसे हल किया?

shushuy 14 अग॰ 2018

मैंने छवि वस्तु के अंदर एक प्रकार जोड़ा जैसे "Image.type='image/png" संलग्न करने से ठीक पहले और सामग्री प्रकार को भी बदल दिया "Content-Type":"multipart/form-data" :

        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })

उम्मीद है कि यह किसी की मदद करता है।

shushuy 15 अग॰ 2018

मैं इसे काम करने में भी असमर्थ था, मैं मल्टीपार्ट/फॉर्म-डेटा को एस 3 (वीडियो) में डालने की कोशिश कर रहा हूं। प्रकार विकल्प का उपयोग करने से मदद नहीं मिली। मल्टीपार्ट/फॉर्म-डेटा हेडर पुट अनुरोध में प्रतीत नहीं होता है:

      const data = new FormData();
      data.append('video', {
          uri: 'file:///<path_to_video_on_iphone.mov',
          type: 'video/quicktime',
          name: 'video.mov',
      });
      response = yield call(() => {
        return api.put(url, data, {
          headers: {
              'Content-Type': 'multipart/form-data',
          },
          transformRequest: [
            (data, headers) => {
                delete headers.common.Authorization;
                return data;
            }
          ]
        });
      });

kodayashi 31 अग॰ 2018

इस मामले के लिए भ्रूण का उपयोग करें :D

var data = new FormData();  
data.append('my_photo', {  
  uri: filePath, // your file path string
  name: 'my_photo.jpg',
  type: 'image/jpg'
}

fetch(path, {  
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'multipart/form-data'
  },
  method: 'POST',
  body: data
});

vampyar 13 सित॰ 2018

👍1

Axios संस्करण 0.18.0 में एक ही समस्या है।
axios आंतरिक रूप से हेडर Content-Type को हटा देता है यदि post, put आदि पर कोई बॉडी नहीं है तो किसी कारण से FormData बनाते समय शरीर खाली रहता है ..
यह मेरा कोड है:

const sendFormData = images => {
   // images is an array of base64 images (strings)
    const formData = new FormData();
    images.forEach((img, i) => {
        formData.append('file', img);
        formData.append('name', `${type}-${i + 1}`);
    });

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

     return axios.post(`http://someurl.com/api/upload-images`, formData, config)
            .then(response => {
               // handle success
            })
            .catch(err => {
                // handle err
     });
}

प्रतिक्रिया मूल संस्करण 0.55.3
यह उदाहरण कोड काम नहीं कर रहा है। अनुरोध निकाय खाली है और Content-Type शीर्षलेख हटा दिया गया है

verybluebot 27 सित॰ 2018

मेरे पास एक ही समस्या है और जब मैं डीबग में चेक करता हूं तो मेरा शरीर स्ट्रिंग है

screen shot 2018-10-26 at 11 12 10 am

और यहाँ मेरा कोड

        const formData = new FormData();
        formData.append('photo', {
          uri: response.uri.replace('file://', ''),
          mineType: 'image/jpeg',
          fileType: 'image/jpg',
          type: 'image/jpg',
          name: 'test.jpg'
        });

        console.log('form data', formData);

         Axios({
           method: 'post',
           url: 'https://dev-host.luxstay.net/api/rooms/10740/photos',
           data: formData,
           headers: {
             Authorization: token,
             'Content-Type': 'multipart/form-data'
           }
         });

अपडेट : एक त्रुटि हुई क्योंकि ऐप डिबग मोड में था। जब मैं डिबग मोड बंद करता हूं, तो यह काम करता है

minhphung210 26 अक्तू॰ 2018

👍5 😕2

axios के xhr एडॉप्टर में एक कोड होता है
if (utils.isFormData(requestData)) { delete requestHeaders['Content-Type']; // Let the browser set it }
मुझे लगता है कि प्रतिक्रिया-मूल में यह सामग्री-प्रकार के शीर्षलेख को हटा देता है यदि आप मल्टीपार्ट फॉर्म डेटा भेज रहे हैं, भले ही आप इसे कोड में सेट करें।
लेकिन मुझे यकीन नहीं है कि लाइन आउट पर टिप्पणी करने से प्रतिक्रिया-मूल में आपकी समस्या का समाधान होगा।

Axios संस्करण 0.18.0 में एक ही समस्या है।
axios आंतरिक रूप से हेडर Content-Type को हटा देता है यदि post, put आदि पर कोई बॉडी नहीं है तो किसी कारण से FormData बनाते समय शरीर खाली रहता है ..
यह मेरा कोड है:
const sendFormData = images => {
   // images is an array of base64 images (strings)
    const formData = new FormData();
    images.forEach((img, i) => {
        formData.append('file', img);
        formData.append('name', `${type}-${i + 1}`);
    });

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

     return axios.post(`http://someurl.com/api/upload-images`, formData, config)
            .then(response => {
               // handle success
            })
            .catch(err => {
                // handle err
     });
}
प्रतिक्रिया मूल संस्करण 0.55.3
यह उदाहरण कोड काम नहीं कर रहा है। अनुरोध निकाय खाली है और Content-Type शीर्षलेख हटा दिया गया है

vineethgeorge03 29 नव॰ 2018

screen shot 2018-10-26 at 11 12 10 am

तो यह कैसा दिखना चाहिए? मेरे पास वस्तु वस्तु भी है।

tkserver 4 दिस॰ 2018

@tkserver ऐसा लगता है कि जब आपके पास कोई ऑब्जेक्ट होता है और फिर आप toString() करते हैं।

const a = {
  name: 'dasdasd'
}
console.log(a.toString());

minhphung210 4 दिस॰ 2018

@tkserver ऐसा लगता है कि जब आपके पास कोई ऑब्जेक्ट होता है और फिर आप toString() करते हैं।
const a = {
  name: 'dasdasd'
}
console.log(a.toString());

शायद मैं स्पष्ट नहीं था। हेडर देखते समय अनुरोध पेलोड [ऑब्जेक्ट ऑब्जेक्ट] दिखाना चाहिए?

tkserver 4 दिस॰ 2018

@tkserver यदि आपके डीबगर में नेटवर्क निरीक्षण सक्षम है, तो यह प्रतिक्रिया-मूल के फॉर्मडाटा को ओवरराइड कर देगा और इसके परिणामस्वरूप खाली फॉर्मडाटा ऑब्जेक्ट पास हो जाएगा जो नेटवर्क निरीक्षण में [ऑब्जेक्ट ऑब्जेक्ट] जैसा दिखेगा।
नेटवर्क निरीक्षण बंद करने के साथ अनुरोध करने का प्रयास करें, उम्मीद है कि इससे मदद मिलती है।

Aman725 18 दिस॰ 2018

👍5 🎉1

धन्यवाद अमन725, मिन्हफंग210 और सभी। जब मैं वास्तविक डिवाइस पर कोड का उपयोग करता हूं तो अपलोड ठीक से काम करता है। ऐसा लगता है कि यह आईओएस सिम्युलेटर से संबंधित है।

tkserver 18 दिस॰ 2018

मुझे यह समस्या थी, लेकिन यह अब ठीक हो गई है।

इसका कारण यह था कि मैं नेटवर्क अनुरोधों को डीबग कर रहा था। मेरे पास मेरे ऐप के प्रवेश बिंदु में कोड की यह पंक्ति थी:

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

मैंने इस पर टिप्पणी की और यह अब काम करता है।

// IMPORTANT: this will cause FormData requests to fail.
// GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

bbmokhtari 4 मार्च 2019

❤2

मैंने अभी यह पाया: https://stackoverflow.com/a/47630754/387912 , क्या यह मदद करता है?

Steffi3rd 13 मार्च 2019

XMLHttpRequest

क्या आप मुझे बता सकते हैं कि आपने अनुरोध कैसे बनाया ताकि यह मल्टीपार्टी के रूप में ठीक से अपलोड हो जाए? मुझे नेटवर्क त्रुटि मिलती रहती है:

Error: Network Error
    at createError (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:168963:17)
    at XMLHttpRequest.handleError (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:168871:16)
    at XMLHttpRequest.dispatchEvent (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28708:27)
    at XMLHttpRequest.setReadyState (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28461:20)
    at XMLHttpRequest.__didCompleteResponse (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28288:16)
    at blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28398:47
    at RCTDeviceEventEmitter.emit (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:3291:37)
    at MessageQueue.__callFunction (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2588:44)
    at blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2345:17
    at MessageQueue.__guard (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2542:13)

अद्यतन: इसे अभी काम करने के लिए प्रबंधित करें। वर्तमान में उपयोग कर रहे हैं:

formData.append('picture', {
          uri: data.uri,
          name: fname,
          type: 'image/' + ext

        });

cristianoccazinsp 1 अप्रैल 2019

👍3

अगर लोग अभी भी इस समस्या का सामना कर रहे हैं, और आपके पास है
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
नेटवर्क अनुरोधों को डीबग करने के लिए स्निपेट, जोड़ने का प्रयास करें
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
यह मेरे लिए काम किया।

tpoppen 17 जून 2019

👍4 🎉1

मैंने छवि वस्तु के अंदर एक प्रकार जोड़ा जैसे "Image.type='image/png" संलग्न करने से ठीक पहले और सामग्री प्रकार को भी बदल दिया "Content-Type":"multipart/form-data" :
        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })
उम्मीद है कि यह किसी की मदद करता है।

आपकी सहायताके लिए धन्यवाद! मैं आईओएस सिम्यूनेटर के साथ अपनी तस्वीर अपलोड करने में सक्षम था लेकिन एंड्रॉइड के साथ नहीं।

छवि प्रकार को 'छवि/जेपीईजी' पर सेट करने के बाद मैंने नेटवर्क त्रुटि होना बंद कर दिया।

const formData = new FormData();
formData.append('file', {
  uri: pictureUri,
  type: 'image/jpeg',
  name: 'profile-picture'
})

cesar3030 5 अग॰ 2019

मैंने छवि वस्तु के अंदर एक प्रकार जोड़ा जैसे "Image.type='image/png" संलग्न करने से ठीक पहले और सामग्री प्रकार को भी बदल दिया "Content-Type":"multipart/form-data" :
        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })
उम्मीद है कि यह किसी की मदद करता है।
आपकी सहायताके लिए धन्यवाद! मैं आईओएस सिम्यूनेटर के साथ अपनी तस्वीर अपलोड करने में सक्षम था लेकिन एंड्रॉइड के साथ नहीं।
छवि प्रकार को 'छवि/जेपीईजी' पर सेट करने के बाद मैंने नेटवर्क त्रुटि होना बंद कर दिया।
const formData = new FormData();
formData.append('file', {
  uri: pictureUri,
  type: 'image/jpeg',
  name: 'profile-picture'
})

किसी के लिए भी कि यह मददगार हो सकता है, यदि आप नहीं जानते कि किस प्रकार की सामग्री भेजी जाएगी, तो multipart/form-data । अब इसे पढ़ना स्पष्ट लगता है, लेकिन किसी भी मीडिया को काम करने में मुझे एक अच्छा घंटा लगा।

    data.append("image", {
      name: "some_name", // also, won't work without this. A name is required
      height: image.height,
      width: image.width,
      type: "multipart/form-data", // <-- this part here
      uri:
        Platform.OS === "android" ? image.uri : image.uri.replace("file:/", "")
    });

mkhoussid 26 अग॰ 2019

🎉3 👍2 👎1

नमस्ते, मैं Vue.Js में Axios अपलोड फ़ाइल करने का प्रयास कर रहा हूँ। क्या कोई इस मुद्दे की समीक्षा और व्याख्या कर सकता है?

एचटीएमएल में
<input type="file" id="file" ref="file" multiple @change="assignFiles"/>

जेएसओ में

`असाइनफाइल्स (ई) {

      let uploadedFiles = this.$refs.file.files;
      for( var i = 0; i < uploadedFiles.length; i++ ) { 
        this.form.AttachmentDocs.push(uploadedFiles[i]);           
      }
      console.log(this.form.AttachmentDocs);
 },`

इसलिए, पोस्ट को ट्रिगर करते समय, फॉर्म डेटा जोड़ रहा हूं।

`आगे बढ़ें सहेजें (ई) {

      e.preventDefault();
      this.$v.$touch();
      if(this.$v.$invalid) {
        return;
      }
    this.showLoading(this.loaderId,true);
      this.postDatas.append('form',JSON.stringify(this.form));
      for( var i = 0; i < this.form.AttachmentDocs.length; i++ ){ 
        let attachment = this.form.AttachmentDocs[i];
        this.postDatas.append('files['+i+']',attachment,attachment.name);           
      }

}`

तो पोस्ट में, मैंने कंसोल विंडो हेडर की जाँच की, वहाँ यह दिखा रहा है

फ़ाइलें [0]: (बाइनरी)
फ़ाइलें [1]: (बाइनरी)
फ़ाइलें [2]: (बाइनरी)
फ़ाइलें [3]: (बाइनरी)

मेरे सर्वर पक्ष में मैं फ़ाइलें प्राप्त करने के लिए नहीं कर सकता।

AravindhNextbrain 3 दिस॰ 2019

इससे कुछ लेना-देना हो सकता है

this.postDatas.append('files['+i+']',attachment,attachment.name);

कोशिश करें files['+' + i + '+']

mkhoussid 3 दिस॰ 2019

मुझे एपीआई लाने के साथ एक ही समस्या है। नोड जे एस में req.body खाली था। 'एक्सप्रेस-दुर्जेय' का उपयोग करने से समस्या हल हो गई। https://www.npmjs.com/package/express-formidable

azizulhaq800804 3 दिस॰ 2019

इससे कुछ लेना-देना हो सकता है
this.postDatas.append('files['+i+']',attachment,attachment.name);  
कोशिश करें files['+' + i + '+']

Sry + संयोजन को इंगित करता है, वाट स्ट्रिंग '+' का उपयोग है। यह परिणाम होगा फ़ाइलें[+0+]

AravindhNextbrain 3 दिस॰ 2019

मुझे एपीआई लाने के साथ एक ही समस्या है। नोड जे एस में req.body खाली था। 'एक्सप्रेस-दुर्जेय' का उपयोग करने से समस्या हल हो गई। https://www.npmjs.com/package/express-formidable

क्या आपने app.use(express.json({ extended: false })); ?

mkhoussid 3 दिस॰ 2019

इससे कुछ लेना-देना हो सकता है
this.postDatas.append('files['+i+']',attachment,attachment.name);  
कोशिश करें files['+' + i + '+']
Sry + संयोजन को इंगित करता है, वाट स्ट्रिंग '+' का उपयोग है। यह परिणाम होगा फ़ाइलें[+0+]

आपका वर्तमान कोड हमेशा आपके लूप के लिए files[+i+] में परिणाम देगा। यह files[+0+], files[+1+], files[+2+], etc कभी नहीं होगा।

साथ ही, files[+0+] कभी मौजूद नहीं होगा। सुनिश्चित नहीं है कि आप क्या करने की कोशिश कर रहे हैं। आपको files[0], files[1], files[2]... ? यदि आप एक वस्तु बनाने की कोशिश कर रहे हैं, तो आपके पास files['+0+'] , लेकिन, फिर से, मुझे यकीन नहीं है कि आप क्या हासिल करने की कोशिश कर रहे हैं।

mkhoussid 3 दिस॰ 2019

मुझे एपीआई लाने के साथ एक ही समस्या है। नोड जे एस में req.body खाली था। 'एक्सप्रेस-दुर्जेय' का उपयोग करने से समस्या हल हो गई। https://www.npmjs.com/package/express-formidable
क्या आपने app.use(express.json({ extended: false })); ?
नहीं, हालांकि, दुर्जेय में मेरे पास एक मुद्दा है। अपलोड की गई तस्वीर अनुरोधित क्षेत्रों में जा रही है। अनुरोध फ़ाइलों में कुछ भी नहीं। यकीन नहीं होता कि ऐसा क्यों हो रहा है।

azizulhaq800804 5 दिस॰ 2019

@duongtranpyco मैंने अपने प्रोजेक्ट से axios हटा दिए हैं, मैंने इसके बजाय अपना खुद का सरल वर्ग लिखा है, आनंद लें!

PS यदि आप मुख्य रूप से JSON भेज रहे हैं, तो कोड को संशोधित करें। मेरे मामले में, सर्वर आमतौर पर एक फॉर्म की अपेक्षा करता है।

const request = async ({url, method = 'GET', params, body, responseType = 'json', headers = {}})=>{
    const escape = (data, encode = encodeURIComponent)=>Object.keys(data||{}).reduce((pairs, key)=>{
        for (let value of [].concat(data[key]))
            pairs.push([`${key}`, `${value}`]);
        return pairs;
    }, []).map(pair=>pair.map(encode).join('=')).join('&');

    if (Object.keys(params||{}).length)
        url += '?'+escape(params);
    if (method=='POST' && typeof body=='object')
    {
        if (body instanceof FormData)
            headers['Content-Type'] = 'multipart/form-data';
        else
        {
            body = escape(body);
            headers['Content-Type'] = 'application/x-www-form-urlencoded';
        }
    }
    let {statusCode, request: req} = await new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.withCredentials = true;
        xhr.responseType = {json: 'text'}[responseType]||responseType;
        xhr.onload = ()=>resolve({statusCode: xhr.status, request: xhr});
        xhr.onerror = ()=>reject(new TypeError('Network request failed'));
        xhr.ontimeout = ()=>reject(new TypeError('Network request timed out'));
        for (let key in headers)
            xhr.setRequestHeader(key, headers[key]);
        xhr.send(body||null);
    });
    if (statusCode<200 || statusCode>=400)
        throw new Error(`network request failed with ${statusCode}: ${url}`);
    switch(responseType)
    {
        case 'json':
            return JSON.parse(req.responseText);
        case 'text':
            return req.responseText;
        case 'request':
            return req;
    }
    return req.response;
};

request.get = (url, opt = {})=>request({...opt, url, body: null});
request.post = (url, ...args)=>request({...args[1]||{}, url, method: 'POST', body: args[0]});

मैं अपने प्रोजेक्ट में इस कोड का उपयोग कर रहा हूं। मैं इस कोड को समझने की कोशिश कर रहा हूं। एक सवाल, क्या यह लाइन जरूरी है,
के लिए ([].concat(data[key]) का मान दें)? इसे सरलता से लिखा जा सकता है,
जोड़े.पुश ([ ${key} , ${data[key]} ]);

azizulhaq800804 5 दिस॰ 2019

अगर लोग अभी भी इस समस्या का सामना कर रहे हैं, और आपके पास है
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
नेटवर्क अनुरोधों को डीबग करने के लिए स्निपेट, जोड़ने का प्रयास करें
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
यह मेरे लिए काम किया।

यह कहाँ है?

SumitThinktanker 11 फ़र॰ 2020

मुझे भी समस्या थी। यह android में फ़ाइल पथ के कारण होता है।
कॉन्स पथ = utils.isAndroid ()?
और यह निम्नलिखित के रूप में लागू करने के साथ ठीक काम करता है

    const formData = new FormData();
    const path = utils.isAndroid() ? `file://${filePath}` : filePath;
    formData.append('Voice', {
      uri: path,
      name: 'test',
      type: 'audio/wav',
    });

    formData.append('Content-Type', 'audio/wav');
     const headers =  {
        'Content-Type': 'multipart/form-data',
      };
    return this._sendRequest(url, 'POST', formData, headers);

genglei01 20 फ़र॰ 2020

 data.append('file', {
    uri: newData.image.path,
    type: 'image/jpeg',
    name: 'teste'

जैसे नाम का प्रयोग करें: name:'teste.jpeg' और यह काम करेगा। आपको फाइल करने के लिए प्रारूप देना होगा अन्यथा यह काम नहीं करेगा।
मैंने इसे नाम से तय किया: 'example.jpeg'

Geteasymoveinc 13 अप्रैल 2020

कई दिनों तक एक्सियोस के साथ वीडियो अपलोड करने की कोशिश करने के बाद, मैं बस हार मान लेता हूं। RNFetchBlob विशेष रूप से Android से फ़ाइलें अपलोड करने के लिए बेहतर विकल्प है। इस खंड को लागू करना आसान है

आरएन-फ़ेच-ब्लॉब

fatihayyildiz 2 मई 2020

Axios: Axios प्रतिक्रिया-मूल में प्रपत्र डेटा नहीं भेजते हैं

सबसे उपयोगी टिप्पणी

सभी 46 टिप्पणियाँ

संबंधित मुद्दों