Czy możesz mi powiedzieć, co jest w tym złego:

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

Mój wynik wygląda tak, nie mogę znaleźć mojej pary „klucz” - „wartość”

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

Nie rozumiem! Wczoraj działało tak dobrze, a dzisiaj moja głowa tyle razy rozwaliła klawiaturę! Firefox, Chrome, oba takie same: /

Nowości w Chrome 50+ i Firefox 39+ (odp. 44+):

• formdata.entries()(w połączeniu z w Array.from()celu debugowania)
• formdata.get(key)
• i bardziej przydatne metody

Oryginalna odpowiedź:

Zwykle robię „debugowanie” FormDataobiektu, po prostu wysyłam go (gdziekolwiek!) I sprawdzam dzienniki przeglądarki (np. Zakładka Sieć Chrome devtools).

Nie potrzebujesz tego samego frameworka Ajax. Nie potrzebujesz żadnych szczegółów. Po prostu wyślij:

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

Łatwo.

Mówisz, że to nie działa. Czego się spodziewasz?

Nie ma sposobu na wydobycie danych z FormDataobiektu; jest przeznaczony tylko do wysyłania danych wraz z XMLHttpRequestobiektem (dla sendmetody).

Zaktualizuj prawie pięć lat później: w niektórych nowszych przeglądarkach nie jest to już prawdą i możesz teraz zobaczyć dostarczone dane, FormDataoprócz tylko upychania danych. Aby uzyskać więcej informacji, zobacz zaakceptowaną odpowiedź .

Mogłeś mieć ten sam problem, co ja na początku. Próbowałem użyć FormData, aby pobrać wszystkie moje pliki wejściowe w celu przesłania obrazu, ale jednocześnie chciałem dołączyć identyfikator sesji do informacji przekazywanych na serwer. Przez cały ten czas myślałem, że dołączając informacje, będzie można je zobaczyć na serwerze, uzyskując dostęp do obiektu. Myliłem się. Po dołączeniu do FormData sposobem sprawdzenia dołączonych informacji na serwerze jest proste $_POST['*your appended data*']zapytanie. tak jak:

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

następnie na php:

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

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

Jeśli jesteś w Chrome, możesz sprawdzić dane posta

Oto jak sprawdzić dane posta

1. Przejdź do zakładki Sieć
2. Poszukaj łącza, do którego wysyłasz dane posta
3. Kliknij na to
4. W nagłówkach możesz zaznaczyć Request Payload, aby sprawdzić dane wiadomości

możesz zobaczyć, czego potrzebujesz console.log(formData.getAll('your key')); obejrzyj https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

dane formularzy nie pojawiają się w konsoli przeglądarki internetowej

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

spróbuj w ten sposób to pokaże

W moim przypadku w przeglądarce Edge:

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

podaj mi ten sam błąd

Więc nie używam FormDatai po prostu ręcznie buduję obiekt

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]":"customer@mail.com" => "user":{"email":"customer@mail.com"}

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

React Version

Upewnij się, że masz nagłówek z '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
    });
  }

Widok

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