POSTคำขอaxios กดปุ่ม url บนคอนโทรลเลอร์ แต่การตั้งค่า null เป็นคลาส POJO ของฉันเมื่อฉันไปถึงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน chrome โครเมี่ยม payload มีข้อมูล ผมทำอะไรผิดหรือเปล่า?

คำขอ Axios POST:

var body = {
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
}

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

คำขอส่งข้อผิดพลาด

เกิดข้อผิดพลาดในการโพสต์ multipart / form-data ส่วนหัวของประเภทเนื้อหาไม่มีขอบเขต

ถ้าฉันทำคำขอเดียวกันกับบุรุษไปรษณีย์มันใช้งานได้ดีและตั้งค่าเป็นคลาส POJO ของฉัน

ทุกคนสามารถอธิบายวิธีตั้งค่าขอบเขตหรือฉันจะส่งข้อมูลฟอร์มโดยใช้ axios ได้ไหม

คุณสามารถโพสต์ข้อมูล axios ได้โดยใช้ FormData ()เช่น:

var bodyFormData = new FormData();

จากนั้นเพิ่มเขตข้อมูลลงในแบบฟอร์มที่คุณต้องการส่ง:

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

หากคุณกำลังอัปโหลดภาพคุณอาจต้องการใช้ .append

bodyFormData.append('image', imageFile); 

และจากนั้นคุณสามารถใช้วิธีการโพส axios (คุณสามารถแก้ไขได้ตาม)

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

คุณสามารถอ่านเพิ่มเติมได้ที่นี่

ตรวจสอบสตริงการสืบค้น

คุณสามารถใช้มันได้ดังต่อไปนี้:

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

ในกรณีของฉันฉันต้องเพิ่มขอบเขตไปยังส่วนหัวดังต่อไปนี้:

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}`,
        },
    });

วิธีนี้มีประโยชน์หากคุณทำงานกับ React Native

อัปโหลดไฟล์ไบนารี (หลายไฟล์)

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นั้นแตกต่างจากแพคเกจ NPM 'form-data' รหัสต่อไปนี้ใช้ได้กับฉันในเบราว์เซอร์:

HTML:

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

ตรงไปตรงมามากขึ้น:

axios.post('/addUser',{
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

การใช้รูปแบบแอพพลิเคชั่น / x-www-form-urlencoded เป็น axios

ตามค่าเริ่มต้น axios จะทำให้วัตถุ JavaScript เป็นอนุกรมต่อเนื่อง ในการส่งข้อมูลในรูปแบบแอพพลิเคชั่น / x-www-form-urlencoded แทนคุณสามารถใช้หนึ่งในตัวเลือกต่อไปนี้

เบราว์เซอร์

ในเบราว์เซอร์คุณสามารถใช้ URLSearchParams API ดังนี้:

const params = ใหม่ URLSearchParams ();

params.append ('param1', 'value1');

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

axios.post ('/ foo', params);

โปรดทราบว่าเบราว์เซอร์ทั้งหมดไม่สนับสนุน URLSearchParams (ดูที่ caniuse.com) แต่มีโพลีฟิลให้ใช้งาน

หรือคุณสามารถเข้ารหัสข้อมูลโดยใช้ไลบรารี qs:

const qs = ต้องการ ('qs');

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

หรืออีกวิธีหนึ่ง (ES6)

นำเข้า qs จาก 'qs';

const data = {'bar': 123};

ตัวเลือก const = {

วิธีการ: 'POST'

ส่วนหัว: {'content-type': 'application / x-www-form-urlencoded'},

data: qs.string (data)

url,};

Axios (ตัวเลือก);

2020 ES6 วิธีการทำ

มีแบบฟอร์มใน html ฉันผูกในข้อมูลเช่น:

ข้อมูล:

form: {
   name: 'Joan Cap de porc',
   email: 'fake@email.com',
   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')
  }
}

วิธีการข้างต้นใช้งานได้สำหรับฉัน แต่เนื่องจากเป็นสิ่งที่ฉันต้องการบ่อยครั้งฉันจึงใช้วิธีการพื้นฐานสำหรับวัตถุแบบแบน หมายเหตุฉันใช้ Vue ด้วยไม่ใช่ REACT

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;
}

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

const url = "https://yourapplicationbaseurl/api/user/authenticate";
    let data = {
      Email: "testuser@gmail.com",
      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);
      });
  };