অক্ষগুলি ফর্ম ডেটা প্রেরণের জন্য অনুরোধ পোস্ট করুন

Question

অক্ষরেখা POSTঅনুরোধটি নিয়ামকটিতে ইউআরএল হিট করছে তবে আমার পোজো ক্লাসে নাল মান নির্ধারণ করছে, যখন আমি ক্রোমে ডেভেলপার সরঞ্জামগুলির মধ্য দিয়ে যাই, তখন পে-লোডে ডেটা থাকে। আমি কি ভুল করছি?

অক্ষ পোস্টার অনুরোধ:

var body = {
    userName: 'Fred',
    userEmail: '[e-mail]'
}

axios({
    method: 'post',
    url: '/addUser',
    data: body
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

ব্রাউজারের প্রতিক্রিয়া:

যদি আমি শিরোনামগুলি সেট করি:

headers:{
  Content-Type:'multipart/form-data'
}

অনুরোধটি ত্রুটি ছুড়ে ফেলে

মাল্টিপার্ট / ফর্ম-ডেটা পোস্ট করার সময় ত্রুটি। সামগ্রী-প্রকারের শিরোনামের সীমাটি অনুপস্থিত

যদি আমি পোস্টম্যানে একই অনুরোধ করি তবে এটি ঠিকঠাক কাজ করছে এবং আমার POJO শ্রেণিতে মান নির্ধারণ করে।

যে কেউ কীভাবে সীমানা নির্ধারণ করবেন বা কীভাবে আমি অক্ষ ব্যবহার করে ফর্ম ডেটা প্রেরণ করতে পারি তা ব্যাখ্যা করতে পারে।

Answer 1

আপনি যেমন ফর্মডেটা () ব্যবহার করে অক্ষের ডেটা পোস্ট করতে পারেন:

var bodyFormData = new FormData();

এবং তারপরে আপনি যে ফর্মটি প্রেরণ করতে চান তাতে ক্ষেত্রগুলি যুক্ত করুন:

bodyFormData.set('userName', 'Fred');

আপনি যদি চিত্রগুলি আপলোড করেন তবে আপনি ব্যবহার করতে পারেন .append

bodyFormData.append('image', imageFile); 

এবং তারপরে আপনি অক্ষগুলি পোস্ট পদ্ধতি ব্যবহার করতে পারেন (আপনি সে অনুযায়ী এটি সংশোধন করতে পারেন)

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

আপনি এখানে আরও পড়তে পারেন

Comments

বডিফর্মডাটা.সেট কোনও ফাংশন নয় আমি এই ত্রুটিটি পেয়েছি

— মনোজ ভরদ্বাজ

সেট পরিবর্তে আপনাকে অ্যাপেন্ড ব্যবহার করতে হবে।

— প্রতীক সিংহল

@ মনোজভারদ্বাজ আপনাকে ফাংশনটি আবদ্ধ করতে হবে, ধরুন যদি আপনার অনুরোধটি যদি ফাংশনটি জমা দেয় তবে আপনাকে সেই ফাংশনটি বাঁধতে হবে। যেমন: - onSubmit = {this.submit (বাঁধাই (এটি)} বা প্রাক্তন: - কনস্ট্রাক্টর কনস্ট্রাক্টর (সুপার) {this.submit = this.submit.bind (এটি);} জমা () {অক্ষ ({}) ; ...}

— শ্রীকান্ত গৌড়

বডিফর্মডাটা.এপেন্ড আমার জন্যও কাজ করা হয়। কেন setকাজ করছেন না তা নিশ্চিত নয়

— ইম ব্যাটম্যান

আপনার কনফিগার অবজেক্টটি ভুল। এটি হওয়া উচিত:{ method: 'post', url: 'myurl', data: bodyFormData, headers: {'Content-Type': 'multipart/form-data' } }

— স্টিভ টেলর

Answer 2

কোয়েরিস্ট্রিং পরীক্ষা করে দেখুন ।

আপনি নিম্নলিখিত হিসাবে এটি ব্যবহার করতে পারেন:

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

Comments

নোড পরিবেশে এটি আরও ভাল

— জাজাগে ডেনিস

আপনার ডেটাতে যদি নেস্টেড অবজেক্ট থাকে তবে 'ক্যোরিস্ট্রিং' প্রত্যাশার মতো কাজ করতে পারে না। সেক্ষেত্রে আপনি ডেটা স্ট্রিংফাই করতে 'কিউএস' মডিউলটি ব্যবহার করতে পারেন।

— জিহাদ উল ইসলাম

Answer 3

আমার ক্ষেত্রে আমাকে নীচের মতো হেডারে সীমানা যুক্ত করতে হয়েছিল :

const form = new FormData();
    formData.append(item.name, fs.createReadStream(pathToFile));

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

আপনি প্রতিক্রিয়া নেটিভের সাথে কাজ করলে এই সমাধানটিও কার্যকর।

Comments

ইমগুর এপিআই পোস্ট করার চেষ্টা করার সময় এটি আমার সমস্যার সমাধান করেছে। দস্তাবেজে কোথাও উল্লেখ করা হয়নি, তবে এটি ছাড়া আপনি 400 অবৈধ ইউআরএল প্রতিক্রিয়া পান।

— কলবি

FormData._boundaryক্রোম and 76 এবং ফায়ারফক্স both 67 উভয় ক্ষেত্রেই সংজ্ঞায়িত রয়েছে এবং অক্ষগুলি যেভাবেই কন্টেন্ট-টাইপ শিরোনাম মুছে দেয় , সুতরাং এর কোনও প্রভাব নেই।

— অ্যাশ

সীমানা অংশটি কেবলমাত্র আমার কোড থেকে অনুপস্থিত ছিল, নোডে নিখুঁতভাবে কাজ করেছিল!

— রাফায়েল মনি

আপনি একজন জীবন রক্ষাকারী

— কেভিন রেড

হাই, একটি সমস্যা যদিও এটি কেবল অ্যান্ড্রয়েডে কাজ করে আপনি কি এটি iOS ডিভাইসগুলিতে কাজ করতে পরিচালিত করেছেন?

— কেভিন রেড

Answer 4

বাইনারি ফাইলগুলি আপলোড করুন (একাধিক)

node.js

আপনি যখন multipart/form-dataবিশেষত একাধিক বাইনারি ফাইলগুলির মাধ্যমে ফাইল পোস্ট করতে চান তখন বিষয়গুলি জটিল হয়ে ওঠে । নীচে একটি কার্যকারী উদাহরণ:

const FormData = require('form-data')
const fs = require('fs')
const path = require('path')

const formData = new FormData()
formData.append('files[]', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('files[]', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData, {
  headers: formData.getHeaders()
})

• পরিবর্তে headers: {'Content-Type': 'multipart/form-data' }আমি পছন্দheaders: formData.getHeaders()
• আমি ব্যবহার করি asyncএবং awaitউপরে, আপনি যদি তাদের পছন্দ না করেন তবে আপনি তাদের সরল প্রতিশ্রুতি বিবৃতিতে পরিবর্তন করতে পারেন

---

নীচে সদ্য যুক্ত হওয়া সামগ্রী:

ব্রাউজার

ব্রাউজারগুলি FormDataএনপিএম প্যাকেজ 'ফর্ম-ডেটা' থেকে আলাদা। নিম্নলিখিত কোডটি ব্রাউজারে আমার জন্য কাজ করে:

এইচটিএমএল:

<input type="file" id="image" accept="image/png"/>

javascript:

const formData = new FormData()

// add a non-binary file
formData.append('files[]', new Blob(['{"hello": "world"}'], { type: 'application/json' }), 'request.json')

// add a binary file
const element = document.getElementById('image')
const file = element.files[0]
formData.append('files[]', file, file.name)
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData)

Comments

এই উদাহরণের জন্য আপনাকে অনেক ধন্যবাদ, একাধিক ফাইল আপলোড কেন কাজ করছে না তা নির্ধারণ করতে বেশ সময় ব্যয় করেছিল।

— মিনকেশ জৈন

আমি একজন বিশেষজ্ঞ নই, কিন্তু আমার ক্ষেত্রে আমি এই জটিলতা (এড়াতে পরিচালিত concat-stream, asyncএবং awaitব্যবহার করে একাধিক ফাইল আপলোড করার জন্য) for(var x = 0; x<this.state.files.length; x++) { formData.append('files[]', this.state.files[x]) }তাই আমি ব্যবহার জমা দিতে পারেনaxios.post(url, formData, config)

— laimison

@ লিমিসন ধন্যবাদ, এটি আমার পক্ষে কাজ করে। আমি আমার উত্তর আপডেট করেছি।

— টাইলার লং

@ টাইলারলং আমি ফর্মডাটা এপিআই তে কোনও গেটহাইডার পদ্ধতি খুঁজে পাচ্ছি না। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

Answer 5

এমনকি আরও সোজা:

axios.post('/addUser',{
    userName: 'Fred',
    userEmail: '[e-mail]'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Comments

হ্যাঁ, যেমনটি মনে হয়, কোনও ফাইল আপলোড না থাকলে এটিই সবচেয়ে সহজ উপায়।

— আকালানকা ওয়েরাসুরিয়া

Answer 6

অ্যাপ্লিকেশন / x-www-form-urlencoded ফর্ম্যাট অক্ষরেখা ব্যবহার করে

ডিফল্টরূপে, অডিওগুলি জাভাস্ক্রিপ্ট অবজেক্টকে জেএসএন-তে সিরিয়ালাইজ করে। পরিবর্তে অ্যাপ্লিকেশন / x-www-form-urlencoded বিন্যাসে ডেটা প্রেরণ করতে, আপনি নিম্নলিখিত বিকল্পগুলির মধ্যে একটি ব্যবহার করতে পারেন।

ব্রাউজার

একটি ব্রাউজারে, আপনি নিম্নলিখিত হিসাবে URLS SearchParams API ব্যবহার করতে পারেন:

কনস্ট প্যারাম = নতুন ইউআরএল সার্চপ্যারাম ();

params.append ('প্যারাম 1', 'মান 1');

params.append ('param2', 'value2');

axios.post ('/ foo', প্যারাম);

নোট করুন যে URLS SearchParams সমস্ত ব্রাউজার দ্বারা সমর্থিত নয় (দেখুন caniuse.com), তবে একটি পলিফিল উপলব্ধ রয়েছে (বিশ্বব্যাপী পরিবেশটি পলিফিল নিশ্চিত করুন)।

বিকল্পভাবে, আপনি কিউএস লাইব্রেরি ব্যবহার করে ডেটা এনকোড করতে পারেন:

কনস্ট qs = প্রয়োজনীয় ('কিউএস');

axios.post ('/ foo', qs.stringify (bar 'বার': 123}));

বা অন্য কোনও উপায়ে (ES6),

'qs' থেকে qs আমদানি করুন;

কনস্ট ডেটা = {'বার': 123};

কনস্ট অপশন = {

পদ্ধতি: 'পোস্ট',

শিরোনাম: {'সামগ্রীর ধরণ': 'অ্যাপ্লিকেশন / x-www-form-urlencoded'},

ডেটা: qs.stringify (ডেটা),

url,};

axios (অপশন);

Answer 7

2020 ES6 করার পদ্ধতি

এইচটিএমএলে ফর্মটি থাকাতে আমি এর মতো ডেটা বাঁধাই:

ডেটা:

form: {
   name: 'Joan Cap de porc',
   email: '[e-mail]',
   phone: 2323,
   query: 'cap d\ou'
   file: null,
   legal: false
},

onsubmit:

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

Answer 8

উপরের পদ্ধতিটি আমার পক্ষে কাজ করেছিল তবে এটি যেহেতু আমার প্রায়শই প্রয়োজন ছিল তাই আমি ফ্ল্যাট অবজেক্টের জন্য একটি প্রাথমিক পদ্ধতি ব্যবহার করেছি। দ্রষ্টব্য, আমি ভ্যু ব্যবহার করছিলাম এবং প্রতিক্রিয়া নয়

packageData: (data) => {
  const form = new FormData()
  for ( const key in data ) {
    form.append(key, data[key]);
  }
  return form
}

নেস্টেড অবজেক্টস এবং ফাইলগুলির সাথে আরও জটিল ডেটা স্ট্রাকচারের দিকে না যাওয়া পর্যন্ত এটি আমার পক্ষে কাজ করেছিল যা নিম্নলিখিতটি দেওয়া যাক

packageData: (obj, form, namespace) => {
  for(const property in obj) {
    // if form is passed in through recursion assign otherwise create new
    const formData = form || new FormData()
    let formKey

    if(obj.hasOwnProperty(property)) {
      if(namespace) {
        formKey = namespace + '[' + property + ']';
      } else {
        formKey = property;
      }

      // if the property is an object, but not a File, use recursion.
      if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
        packageData(obj[property], formData, property);
      } else {
        // if it's a string or a File
      formData.append(formKey, obj[property]);
      }
    }
  }
  return formData;
}

Comments

অবজেক্টটোফর্মডাটা অনির্ধারিত এবং ফর্মডাটা বাহিরের বাইরে ফিরে আসে, তবে এর জন্য সংজ্ঞায়িত হয়। ফর্মডাটা সহজ, তবে অবজেক্টটোফর্মডাটা কী হওয়ার কথা?

— ট্রেভর

আমি মনে করি এটি ফাংশনটির নাম হবে। কারণ এটি পুনরাবৃত্তি হওয়া বোঝায়, তাই আমি ধরে নিই যে আপনি এটি পরিবর্তন করতে objectToFormDataপারেন packageDataবা এর বিপরীতে করতে পারেন

— রেমন্ড অ্যাটিভি

Answer 9

import axios from "axios";
import qs from "qs";   

const url = "https://yourapplicationbaseurl/api/user/authenticate";
    let data = {
      Email: "[e-mail]",
      Password: "Admin@123"
    };
    let options = {
      method: "POST",
      headers: { "content-type": "application/x-www-form-urlencoded" },
      data: qs.stringify(data),
      url
    };
    axios(options)
      .then(res => {
        console.log("yeh we have", res.data);
      })
      .catch(er => {
        console.log("no data sorry ", er);
      });
  };