¿Puedes decirme qué pasa con esto?

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

Mi salida se ve así, no puedo encontrar mi par "clave" - ​​"valor"

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

¡No puedo entender! Ayer funcionó tan bien, ¡y hoy mi cabeza chocó el teclado tantas veces! Firefox, Chrome, ambos iguales: /

Nuevo en Chrome 50+ y Firefox 39+ (resp. 44+):

• formdata.entries()(combinar con Array.from()para debugabilidad)
• formdata.get(key)
• y métodos más muy útiles

Respuesta original:

Lo que suelo hacer para "depurar" un FormDataobjeto es simplemente enviarlo (¡a cualquier lugar!) Y comprobar los registros del navegador (por ejemplo, la pestaña Red de Chrome devtools).

No necesita el mismo marco Ajax. No necesitas ningún detalle. Solo envialo:

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

Fácil.

Dices que no funciona. ¿Qué esperas que pase?

No hay forma de obtener los datos de un FormDataobjeto; solo está diseñado para que lo use para enviar datos junto con un XMLHttpRequestobjeto (para el sendmétodo).

Actualización casi cinco años después: en algunos navegadores más nuevos, esto ya no es cierto y ahora puede ver los datos proporcionados FormDataademás de simplemente rellenarlos. Consulte la respuesta aceptada para obtener más información.

Es posible que haya tenido el mismo problema que yo tenía inicialmente. Estaba tratando de usar FormData para tomar todos mis archivos de entrada para cargar una imagen, pero al mismo tiempo quería agregar una ID de sesión a la información que se pasa al servidor. Durante todo este tiempo, pensé que al agregar la información, podría verla en el servidor al acceder al objeto. Estaba equivocado. Cuando agrega a FormData, la forma de verificar la información adjunta en el servidor es mediante una simple $_POST['*your appended data*']consulta. al igual que:

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

luego en php:

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

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

Si está en Chrome, puede verificar los datos de publicación

Aquí es cómo verificar los datos de la publicación

1. Ir a la pestaña Red
2. Busque el enlace al que está enviando los datos de la publicación
3. Haz click en eso
4. En los encabezados, puede verificar Solicitar carga útil para verificar los datos de publicación

puede ver lo que necesita usar console.log(formData.getAll('your key')); ver https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

los datos del formulario no aparecen en la consola del navegador web

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

intente de esta manera se mostrará

En mi caso en el navegador Edge:

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

dame el mismo error

Así que no estoy usando FormDatay solo construyo un objeto manualmente

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

Reaccionar versión

Asegúrate de tener un encabezado con '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
    });
  }

Ver

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