axios plaatst verzoek om formuliergegevens te verzenden

axios POST-verzoek raakt de url op de controller, maar stelt null-waarden in op mijn POJO-klasse, wanneer ik door de ontwikkelaarstools in Chrome ga, bevat de payload gegevens. Wat doe ik verkeerd?

Axios POST-verzoek:

var body = {
    userName: 'Fred',
    userEmail: '[email protected]'
}
axios({
    method: 'post',
    url: '/addUser',
    data: body
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Browserreactie:

Als ik koppen instel als:

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

Het verzoek veroorzaakt de fout

Fout bij het plaatsen van multipart/form-data. Content-Type header mist grens

Als ik hetzelfde verzoek doe in de postbode, werkt het prima en worden waarden ingesteld voor mijn POJO-klasse.

Kan iemand uitleggen hoe ik een grens kan instellen of hoe ik formuliergegevens kan verzenden met behulp van axios.

Antwoord 1, autoriteit 100%

U kunt axios-gegevens posten met behulp van FormData()zoals:

var bodyFormData = new FormData();

En voeg vervolgens de velden toe aan het formulier dat u wilt verzenden:

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

Als je afbeeldingen uploadt, wil je misschien .append

. gebruiken

bodyFormData.append('image', imageFile); 

En dan kun je de axios post-methode gebruiken (je kunt het dienovereenkomstig aanpassen)

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

Gerelateerd GitHub-probleem:

Kan geen .post krijgen met ‘Content-Type’: ‘multipart/form-data ‘ aan het werk @ axios/axios

Antwoord 2, autoriteit 13%

In mijn geval moest ik de grenstoevoegen aan de headerals volgt:

const form = new FormData();
form.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}`,
    },
});

Deze oplossing is ook handig als je met React Native werkt.

Antwoord 3, autoriteit 9%

Bekijk querystring.

Je kunt het als volgt gebruiken:

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

Antwoord 4, autoriteit 3%

2020 ES6-manier van doen

Met het formulier in html heb ik de gegevens als volgt gebonden:

GEGEVENS:

form: {
   name: 'Joan Cap de porc',
   email: '[email protected]',
   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')
  }
}

Antwoord 5, autoriteit 2%

Nog eenvoudiger:

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

Antwoord 6

Application/x-www-form-urlencoded-indeling gebruiken in axios

Axios serialiseert standaard JavaScript-objecten naar JSON. Gegevens verzenden:
in plaats daarvan in de indeling application/x-www-form-urlencoded, kunt u
een van de volgende opties.

Browser

In een browser kunt u de URLSearchParams API als volgt gebruiken:

const params = nieuwe URLSearchParams();

params.append(‘param1’, ‘value1’);

params.append(‘param2’, ‘value2’);

axios.post(‘/foo’, params);

Houd er rekening mee dat URLSearchParams niet door alle browsers wordt ondersteund (zie caniuse.com), maar er is een polyfill beschikbaar (zorg ervoor dat u de globale omgeving polyfill).

U kunt ook gegevens coderen met behulp van de qs-bibliotheek:

const qs = required(‘qs’);

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

Of op een andere manier (ES6),

import qs uit ‘qs’;

const data = { ‘bar’: 123 };

const options = {

methode: ‘POST’,

headers: { ‘content-type’: ‘application/x-www-form-urlencoded’ },

data: qs.stringify(data),

url, };

axios(opties);

Antwoord 7

import axios from "axios";
import qs from "qs";   
const url = "https://yourapplicationbaseurl/api/user/authenticate";
    let data = {
      Email: "[email protected]",
      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);
      });
  };

Antwoord 8

De bovenstaande methode werkte voor mij, maar omdat het iets was dat ik vaak nodig had, gebruikte ik een basismethode voor een plat object. Let op, ik gebruikte ook Vue en niet REACT

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

Wat voor mij werkte totdat ik complexere gegevensstructuren tegenkwam met geneste objecten en bestanden die vervolgens leidden tot het volgende

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

Antwoord 9

ik moest ook de lengte van de inhoud berekenen

const formHeaders = form.getHeaders();
formHeaders["Content-Length"] = form.getLengthSync()
const config = {headers: formHeaders}
return axios.post(url, form, config)
.then(res => {
    console.log(`form uploaded`)
})

Antwoord 10

In mijn geval was het probleem dat het formaat van de FormData-toevoegbewerking de extra parameter “options” nodig had om de bestandsnaam als volgt te definiëren:

var formData = new FormData();
formData.append(fieldName, fileBuffer, {filename: originalName});

Ik zie veel klachten dat axios kapot is, maar in feite is de hoofdoorzaak het niet correct gebruiken van formuliergegevens. Mijn versies zijn:

"axios": "^0.21.1",
"form-data": "^3.0.0",

Aan de ontvangende kant verwerk ik dit met multer, en het oorspronkelijke probleem was dat de bestandsarray niet werd gevuld – ik kreeg altijd een verzoek terug zonder dat er bestanden uit de stream waren geparseerd.

Bovendien was het nodig om de form-data header door te geven die is ingesteld in het axios-verzoek:

       const response = await axios.post(getBackendURL() + '/api/Documents/' + userId + '/createDocument', formData, {
        headers: formData.getHeaders()
    });

Mijn hele functie ziet er als volgt uit:

async function uploadDocumentTransaction(userId, fileBuffer, fieldName, originalName) {
    var formData = new FormData();
    formData.append(fieldName, fileBuffer, {filename: originalName});
    try {
        const response = await axios.post(
            getBackendURL() + '/api/Documents/' + userId + '/createDocument',
            formData,
            {
                headers: formData.getHeaders()
            }
        );
        return response;
    } catch (err) {
        // error handling
    }
}

De waarde van de “fieldName” is niet significant, tenzij je een ontvangende eindverwerking hebt die dit nodig heeft.

Antwoord 11

https://www.npmjs.com/package/axios

Het werkt

// “content-type”: “application/x-www-form-urlencoded”,
// bega dit

import axios from 'axios';
let requestData = {
      username : "[email protected]",
      password: "123456"
    };
    const url = "Your Url Paste Here";
    let options = {
      method: "POST",
      headers: { 
        'Content-type': 'application/json; charset=UTF-8',
        Authorization: 'Bearer ' + "your token Paste Here",
      },
      data: JSON.stringify(requestData),
      url
    };
    axios(options)
      .then(response => {
        console.log("K_____ res :- ", response);
        console.log("K_____ res status:- ", response.status);
      })
      .catch(error => {
        console.log("K_____ error :- ", error);
      });

ophaalverzoek

fetch(url, {
    method: 'POST',
    body: JSON.stringify(requestPayload),           
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
        Authorization: 'Bearer ' + token,
    },
})
    // .then((response) => response.json()) .  // commit out this part if response body is empty
    .then((json) => {
        console.log("response :- ", json);
    }).catch((error)=>{
        console.log("Api call error ", error.message);
        alert(error.message);
});