Können Sie mir sagen, was daran falsch ist:

var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);

Meine Ausgabe sieht so aus, ich kann mein Paar "Schlüssel" - "Wert" nicht finden

FormData
*__proto__: FormData
**append: function append() { [native code] }
***arguments: null
***caller: null
***length: 0
***name: "append"
***prototype: append
***__proto__: function Empty() {}
*constructor: function FormData() { [native code] }
**arguments: null
**caller: null
**length: 0
**name: "FormData"
**prototype: FormData
**toString: function toString() { [native code] }
*__proto__: Object
**__proto__: Object
**__defineGetter__: function __defineGetter__() { [native code] }
**__defineSetter__: function __defineSetter__() { [native code] }
**__lookupGetter__: function __lookupGetter__() { [native code] }
**__lookupSetter__: function __lookupSetter__() { [native code] }
**constructor: function Object() { [native code] }
**hasOwnProperty: function hasOwnProperty() { [native code] }
**isPrototypeOf: function isPrototypeOf() { [native code] }
**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
**toLocaleString: function toLocaleString() { [native code] }
**toString: function toString() { [native code] }
**valueOf: function valueOf() { [native code] }

Ich kann nicht verstehen! Gestern hat es so gut funktioniert und heute hat mein Kopf so oft die Tastatur abgestürzt! Firefox, Chrome, beide gleich: /

Neu in Chrome 50+ und Firefox 39+ (bzw. 44+):

• formdata.entries()( Array.from()zur Debugbarkeit kombinieren mit )
• formdata.get(key)
• und sehr nützliche Methoden

Ursprüngliche Antwort:

Was ich normalerweise mache, um ein FormDataObjekt zu "debuggen" , ist es einfach zu senden (überall!) Und die Browserprotokolle zu überprüfen (z. B. die Registerkarte "Netzwerk" von Chrome devtools).

Sie benötigen nicht dasselbe Ajax-Framework. Sie brauchen keine Details. Schick es einfach:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(data);

Einfach.

Sie sagen, es funktioniert nicht. Was erwarten Sie?

Es gibt keine Möglichkeit, die Daten aus einem FormDataObjekt herauszuholen . Es ist nur für Sie vorgesehen, um Daten zusammen mit einem XMLHttpRequestObjekt (für die sendMethode) zu senden .

Update fast fünf Jahre später: In einigen neueren Browsern ist dies nicht mehr der Fall, und Sie können jetzt die bereitgestellten Daten anzeigen und FormDatanur noch Daten hineinstecken. Weitere Informationen finden Sie in der akzeptierten Antwort .

Möglicherweise hatten Sie das gleiche Problem, das ich ursprünglich hatte. Ich habe versucht, mit FormData alle meine Eingabedateien zum Hochladen eines Bildes abzurufen, wollte aber gleichzeitig eine Sitzungs-ID an die an den Server weitergegebenen Informationen anhängen. Während dieser ganzen Zeit, dachte ich, wenn Sie die Informationen anhängen, können Sie sie auf dem Server sehen, indem Sie auf das Objekt zugreifen. Ich lag falsch. Wenn Sie an FormData anhängen, können Sie die angehängten Informationen auf dem Server durch eine einfache $_POST['*your appended data*']Abfrage überprüfen . wie so:

js:

$('form').submit(function(){
    var sessionID = 8;
    var formData = new FormData(this);
    formData.append('id', sessionID);

    $.ajax({
        url: "yoururl.php",
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data){
            alert(data);
        }
    });
});

dann auf php:

$sessionID = $_POST['id'];
$files = $_FILES['image'];

$foreach ($files as $key=>val){
    //...
}

Wenn Sie in Chrome sind, können Sie die Post-Daten überprüfen

Hier erfahren Sie, wie Sie die Post-Daten überprüfen

1. Gehen Sie zur Registerkarte Netzwerk
2. Suchen Sie nach dem Link, an den Sie Post-Daten senden
3. Klick es an
4. In den Kopfzeilen können Sie Request Payload überprüfen, um die Post-Daten zu überprüfen

Sie können sehen, dass Sie es verwenden müssen console.log(formData.getAll('your key')); Sehen Sie sich https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll an

Formulardaten werden in der Webbrowser-Konsole nicht angezeigt

for (var data of formData) {
  console.log(data);
}

versuchen Sie es so, wie es sich zeigt

In meinem Fall im Edge-Browser:

  const formData = new FormData(this.form);
  for (const [key, value] of formData.entries()) {
      formObject[key] = value;
  }

gib mir den gleichen Fehler

Ich benutze es also nicht FormDataund erstelle einfach manuell ein Objekt

import React from 'react';    
import formDataToObject from 'form-data-to-object';

  ...

let formObject = {};

// EDGE compatibility -  replace FormData by
for (let i = 0; i < this.form.length; i++) {
  if (this.form[i].name) {
    formObject[this.form[i].name] = this.form[i].value;
  }
}

const data = formDataToObject.toObj(formObject): // convert "user[email]":"[email protected]" => "user":{"email":"[email protected]"}

const orderRes = await fetch(`/api/orders`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      });

const order = await orderRes.json();

Version reagieren

Stellen Sie sicher, dass Sie einen Header mit haben 'content-type': 'multipart/form-data'

_handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData();
          formData.append('file', this.state.file);
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }

     axios.post("/upload", formData, config)
         .then((resp) => {
             console.log(resp)
         }).catch((error) => {
    })
  }

  _handleImageChange(e) {
    e.preventDefault();
    let file = e.target.files[0];
    this.setState({
      file: file
    });
  }

Aussicht

  #html
 <input className="form-control"
    type="file" 
    onChange={(e)=>this._handleImageChange(e)} 
 />