অ্যাকজিওস সহ একটি ফর্ম থেকে কীভাবে একটি ফাইল পোস্ট করবেন

Question

কাঁচা এইচটিএমএল ব্যবহার করার সময় আমি নিম্নলিখিতটি ব্যবহার করে ফ্লাস্ক সার্ভারে একটি ফাইল পোস্ট করি যখন আমি ফ্লাস্ক অনুরোধটি বিশ্বব্যাপী ফাইলগুলি অ্যাক্সেস করতে পারি:

<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'
        }
    })
}

আমি যদি উপরে একই আপলোডফাইলে ফাংশনটি ব্যবহার করি তবে অক্ষগুলি থেকে শিরোনামের জসনটি সরিয়ে ফেলি ostপস্ট পদ্ধতিতে আমি আমার ফ্লেস্ক অনুরোধের আইটেমের স্ট্রিং মানগুলির সিএসভি তালিকা (ফাইলটি একটি .csv) এর ফর্ম কীতে পাই।

অক্ষের মাধ্যমে পাঠানো কোনও ফাইল অবজেক্ট আমি কীভাবে পেতে পারি?

Comments

@ নিকলেশ হ্যাঁ টাইপিং কেটে পেস্ট করে, আমি এটি উপরে ঠিক করেছিলাম, কোডে ডাবল উদ্ধৃতি অন্তর্ভুক্ত রয়েছে।

— ডন স্মিথ

আপনি ট্যাগ পরিবর্তে v-on:change="uploadFile"দিয়ে চেষ্টা করেছেন ? inputform

— নিকলেশ রাউত

@ নিকলেশ আমি একই ফলাফল পেয়েছি - তথ্যটি স্ট্রিং হিসাবে প্রেরণ করা হয়েছে এবং অনুরোধের মাধ্যমে তুলে নেওয়া হয়েছে। অনুরোধ করুন না request

— ডন স্মিথ

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

ফাইল পোস্ট করার পরে। আমাদের কি এইচটিটিপি অনুরোধ থেকে তাদের অ্যাক্সেস করতে হবে বা সার্ভারের পাশের প্যারামিটারগুলি থেকে তাদের অ্যাক্সেসের প্রয়োজন আছে?

— পার্থ প্যাটেল

@ পার্থপেটেল: আমি $_FILESপিএইচপি ব্যবহার করার সাথে সাথে সার্ভার সাইডে ফাইলগুলি ব্যবহার করতে যাচ্ছি

— নিকলেশ রাউত

এই পোস্টের জন্য ধন্যবাদ, তবে কেন আমাদের প্রয়োজন তা আমি এখনও দেখতে পাই না FormData। অ্যালিজোর ডকের মতে, উভয়ই Fileএবং কেবল ব্রাউজারFormData হিসাবে বিবেচিত হয় , তাই উভয় উপায়ে সমানভাবে দেখা যায় ( github.com/axios/axios#request-config )

— হিরোকি

অসাধারণ ! আমি পাঠানোর ছিল ডেটা: {ডেটা: formData} 'যা ত্রুটি 412. উৎপাদিত হয়েছিল এটা সঙ্গে কাজdata:formData

— অসীম

মনোযোগ: স্নিপেটটি যখন ব্রাউজারের প্রসঙ্গে চালিত হয় তখন যেমন হয় তেমন কাজ করে। formData.getHeaders()নোড.জেজে চালানোর জন্য, একটি দ্বারা শিরোনামকে পাস করা দরকার এটি অক্ষর সহ একটি পরিচিত সমস্যা; উদাহরণস্বরূপ দেখুনhttps://github.com/axios/axios/issues/789

— এমজেভি

Answer 2

ভ্যু ব্যবহার করে নমুনা অ্যাপ্লিকেশন। অনুরোধটি প্রক্রিয়া করার জন্য লোকালহোস্টে চলমান একটি ব্যাকএন্ড সার্ভারের প্রয়োজন:

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

: আমি এখানে এর সাথে সম্পর্কিত প্রশ্ন একটি axios কটাক্ষপাত আছে করতে বলতে পারি 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' }অপশনগুলি থেকে সার্ভারের প্রতিক্রিয়া পাওয়ার পরে অপসারণ করা একমাত্র উপায় ছিল যা প্রকৃতপক্ষে পোস্টটি পাঠাত। আমি সম্ভবত কিছু ভুল করছি, তবে এটি কাজ করছে এবং আমি এটিকে একা রেখে যাচ্ছি

— জেফ ব্লুমেল

এটা অসাধারণ! আমি কখনই ভাবিনি যে আপনি পুরো ফর্মটি পাঠাতে পারেন। ধন্যবাদ!

— দারা জাভা