Você pode me dizer o que há de errado com isso:

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

Minha saída é semelhante a esta, não consigo encontrar meu par "chave" - ​​"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] }

Eu não consigo entender! Ontem funcionou tão bem, e hoje minha cabeça bateu no teclado tantas vezes! Firefox, Chrome, ambos iguais: /

Novo no Chrome 50+ e Firefox 39+ (resp. 44+):

• formdata.entries()(combine com Array.from()para depuração)
• formdata.get(key)
• e métodos mais úteis

Resposta original:

O que eu normalmente faço para 'depurar' um FormDataobjeto, é apenas enviá-lo (para qualquer lugar!) E verificar os logs do navegador (por exemplo, a guia Rede do Chrome devtools).

Você não precisa de um / o mesmo framework Ajax. Você não precisa de nenhum detalhe. Basta enviar:

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

Fácil.

Você diz que não está funcionando. O que você espera que aconteça?

Não há como obter os dados de um FormDataobjeto; destina-se apenas a você para enviar dados junto com um XMLHttpRequestobjeto (para o sendmétodo).

Atualize quase cinco anos depois: em alguns navegadores mais novos, isso não é mais verdade e agora você pode ver os dados fornecidos FormDataalém de apenas inserir dados nele. Veja a resposta aceita para mais informações.

Você pode estar tendo o mesmo problema que eu estava tendo inicialmente. Eu estava tentando usar FormData para pegar todos os meus arquivos de entrada para fazer upload de uma imagem, mas ao mesmo tempo queria anexar um ID de sessão às informações passadas para o servidor. Todo esse tempo, pensei, anexando as informações, você seria capaz de vê-las no servidor acessando o objeto. Eu estava errado. Quando você anexa ao FormData, a maneira de verificar as informações anexadas no servidor é por meio de uma $_POST['*your appended data*']consulta simples . igual a:

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

então no php:

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

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

Se você estiver no Chrome, você pode verificar os dados de postagem

Aqui está como verificar os dados do Post

1. Vá para a guia Rede
2. Procure o link para o qual você está enviando os dados da postagem
3. Clique nisso
4. Nos cabeçalhos, você pode verificar Request Payload para verificar os dados de postagem

você pode ver que precisa usar console.log(formData.getAll('your key')); assista ao https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

os dados do formulário não aparecem no console do navegador da web

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

tente desta forma vai mostrar

No meu caso, no navegador Edge:

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

me dê o mesmo erro

Não estou usando FormDatae apenas construo manualmente um objeto

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

Versão React

Certifique-se de ter um cabeçalho com '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
    });
  }

Visão

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