एक्सिस के साथ फॉर्म से फाइल कैसे पोस्ट करें

Question

कच्चे HTML का उपयोग करते समय जब मैं एक फ्लास्क सर्वर पर एक फाइल पोस्ट करता हूं, तो निम्नलिखित फ्लास्क अनुरोधों से फाइल का उपयोग कर सकता हूं वैश्विक:

<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
    <input type="file" id="file" name="file">
    <input type=submit value=Upload>
</form>

फ्लास्क में:

def post(self):
    if 'file' in request.files:
        ....

जब मैं एक्सियोस के साथ ऐसा करने की कोशिश करता हूं तो फ्लास्क अनुरोध वैश्विक खाली है:

<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    })
}

यदि मैं ऊपर एक ही अपलोडफाइल फ़ंक्शन का उपयोग करता हूं, लेकिन हेडर्स जोंस को axios.post विधि से हटाता हूं, तो मुझे मेरे फ्लास्क अनुरोध ऑब्जेक्ट के रूप में मिलता है स्ट्रिंग मानों की एक सीएसवी सूची (फ़ाइल एक .csv) है।

मुझे अक्षतंतु द्वारा भेजी गई फ़ाइल ऑब्जेक्ट कैसे मिल सकती है?

Comments

@ निक्लेश हां टाइपो कटिंग और पेस्टिंग, मैंने इसे ऊपर तय किया, जिसमें कोड में दोहरे उद्धरण शामिल हैं।

— डॉन स्मिथे

आप की कोशिश की थी v-on:change="uploadFile"के साथ inputके बजाय formटैग?

— निकलेश राउत

@ निक्लेश मुझे एक ही परिणाम मिलता है - डेटा स्ट्रिंग के रूप में भेजा जाता है और अनुरोध द्वारा उठाया जाता है। अनुरोध नहीं। फ्लास्क में।

— डॉन स्मिथे

Answer 1

फ़ाइल को formDataऑब्जेक्ट में जोड़ें , और Content-Typeहेडर को इसमें सेट करें multipart/form-data।

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Comments

फाइलों को पोस्ट करने के बाद। क्या हमें उन्हें HTTP अनुरोध से एक्सेस करने की आवश्यकता है या उन्हें सर्वर साइड पर मापदंडों से एक्सेस करने की आवश्यकता है।

— पार्थ पटेल

@ParPPatel: मैं $_FILESसर्वर साइड में फाइल प्राप्त करने के लिए उपयोग कर रहा हूं जैसा कि मैं PHP का उपयोग कर रहा हूं

— निकलेश राउत

इस पोस्ट के लिए धन्यवाद, लेकिन मुझे अभी भी यह नहीं दिखता कि हमें इसकी आवश्यकता क्यों है FormData। Axios के दस्तावेज़ के अनुसार, दोनों Fileऔर FormDataके रूप में इलाज कर रहे हैं केवल ब्राउज़र है, तो दोनों तरीकों से समान रूप से देखा जा सकता है ( github.com/axios/axios#request-config )

— हिरोकी

बहुत बढ़िया ! मैं 'डेटा: {data: formData}' भेज रहा था, जो त्रुटि 412 उत्पन्न कर रहा था। इसने साथ काम कियाdata:formData

— असीम

ध्यान: स्निपेट एक ब्राउज़र के संदर्भ में चलाने के रूप में काम करता है। नोड.जेएस में चलाने के लिए, formData.getHeaders()इसके द्वारा गणना किए जाने वाले हेडर को पास करने की आवश्यकता होती है। यह एक्सिओस के साथ एक ज्ञात मुद्दा है; उदाहरण के लिए देखेंhttps://github.com/axios/axios/issues/789

— mjv

Answer 2

Vue का उपयोग करके नमूना आवेदन। अनुरोध को संसाधित करने के लिए स्थानीय होस्ट पर चलने वाले बैकएंड सर्वर की आवश्यकता होती है:

var app = new Vue({
  el: "#app",
  data: {
    file: ''
  },
  methods: {
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      console.log('>> formData >> ', formData);

      // You should have a server side REST API 
      axios.post('http://localhost:8080/restapi/fileupload',
          formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        ).then(function () {
          console.log('SUCCESS!!');
        })
        .catch(function () {
          console.log('FAILURE!!');
        });
    },
    handleFileUpload() {
      this.file = this.$refs.file.files[0];
      console.log('>>>> 1st element in files array >>>> ', this.file);
    }
  }
});

https://codepen.io/pmarimuthu/pen/MqqaOE

Comments

क्या मैं आपसे एक अक्षीय संबंधित प्रश्न पर एक नज़र डालने के लिए कह सकता हूं: stackoverflow.com/questions/59470085/… ?

— इस्तियाक अहमद

Answer 3

यह मेरे लिए काम करता है, मुझे आशा है कि किसी को मदद मिलेगी।

var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
    .then(res => {
        console.log({res});
    }).catch(err => {
        console.error({err});
    });

Comments

Nuxt का उपयोग करना - यह अंत में मेरे लिए काम किया। हटाने headers: { 'Content-Type': 'multipart/form-data' }का एकमात्र तरीका था कि वह विकल्पों से सर्वर प्रतिक्रिया प्राप्त करने के बाद वास्तव में पोस्ट भेजेगा। मैं शायद कुछ गलत कर रहा हूं, लेकिन यह काम कर रहा है और मैं इसे अकेला छोड़ रहा हूं

— जेफ ब्लूमेल

ये जबरदस्त है! मैंने कभी नहीं सोचा होगा कि आप पूरे फॉर्म भेज सकते हैं। धन्यवाद!

— दारा जावा