webentwicklung-frage-antwort-db.com.de

Axios sendet eine Anfrage, um Formulardaten zu senden

die axios POST -Anforderung trifft die URL auf dem Controller, setzt jedoch Nullwerte für meine POJO-Klasse. Wenn ich Entwickler-Tools in Chrome durcharbeite, enthält die Nutzlast Daten. Was mache ich falsch?

Axios POST Request: 

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

Browser-Antwort:

enter image description here

Wenn ich Überschriften setze als:

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

Die Anfrage löst den Fehler aus

Fehler beim Posten von mehrteiligen/Formulardaten. In der Kopfzeile des Inhaltstyps fehlt eine Begrenzung

Wenn ich die gleiche Anfrage im Postboten mache, funktioniert es gut und setzt Werte auf meine POJO-Klasse.

Kann mir jemand erklären, wie man Grenzen setzt oder wie ich Formulardaten mit Axios senden kann.

reactjsreact-reduxaxiosajaxformaxios-cookiejar-support
111
Srikanth Gowda

Sie können Axios-Daten mit FormData () wie folgt posten:

var bodyFormData = new FormData();

Fügen Sie dann die Felder zu dem Formular hinzu, das Sie senden möchten:

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

Wenn Sie Bilder hochladen, können Sie .append verwenden.

bodyFormData.append('image', imageFile);

Und dann können Sie Axios Post-Methode verwenden (Sie können es entsprechend ändern)

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

Sie können mehr lesen hier

180
Aaqib

Check out querystring .

Sie können es wie folgt verwenden:

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

In meinem Fall musste ich dem Header das Boundary wie folgt hinzufügen:

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

Diese Lösung ist auch nützlich, wenn Sie mit React Native arbeiten.

14
Luiz Dias

Laden Sie (mehrere) Binärdateien hoch

Kompliziert wird es, wenn Sie Dateien über multipart/form-data veröffentlichen möchten, insbesondere mehrere Binärdateien. Unten ist ein Arbeitsbeispiel:

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

const formData = new FormData()
formData.append('json', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('attachment', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
formData.pipe(concat({ encoding: 'buffer' }, async data => {
  const r = await rc.post('/restapi/v1.0/account/~/extension/~/fax', data, {
    headers: formData.getHeaders()
  })
  console.log(r.data)
}))
  • Anstelle von headers: {'Content-Type': 'multipart/form-data' } bevorzuge ich headers: formData.getHeaders()
  • Ich muss concat-stream verwenden, um mehrere Dateistreams zusammenzufassen
  • Ich verwende async und await oben, Sie können sie in einfache Versprechen-Aussagen ändern, wenn Sie sie nicht mögen
8
Tyler Long

Noch einfacher:

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

Die obige Methode funktionierte für mich, aber da es etwas war, das ich oft brauchte, verwendete ich eine grundlegende Methode für flache Objekte. Beachten Sie, ich habe auch Vue und nicht REACT verwendet

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

Das hat bei mir funktioniert, bis ich auf komplexere Datenstrukturen mit verschachtelten Objekten und Dateien gestoßen bin, die dann folgendes zuließen

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)) {
        objectToFormData(obj[property], formData, property);
      } else {
        // if it's a string or a File
      formData.append(formKey, obj[property]);
      }
    }
  }
  return formData;
}
1
Juan Pablo Ugas