FormData.append (“chave”, “valor”) não está funcionando

106

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: /

Netzaffin
fonte

Respostas:

127

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.

Rudie
fonte
obrigado - esta foi uma maneira rápida útil de obter o objeto FormData digitando-o no console do Chrome.
Dan Smart
De acordo com os métodos do Google formData foram adicionados no Chrome v50.
dia
Como você veria os logs do navegador se fosse um navegador móvel como o Safari? Estou usando o objeto FormData em um aplicativo da web destinado a dispositivos móveis e não consigo descobrir como depurá-lo.
kiwicomb123
1
@ kiwicomb123 Formdata.entries()+ Array.from()+ alert()se for moderno o suficiente ou dê uma olhada na depuração de dispositivos móveis
Rudie
então sem borda ou ie11?
SuperUberDuper
50

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.

Jesper
fonte
20
OK ... isso é uma merda. Por que não consigo registrar o FormData em meu console? :-( Isso simplesmente não faz sentido para mim, já que eu pensei que era um objeto comum
netzaffin
12
@netzaffin: Tanto o Firebug quanto o inspetor do Chrome permitem que você veja os parâmetros da solicitação enviada em uma solicitação XHR, desde que você tenha aberto a guia de rede e iniciado o registro, então você deve conseguir fazer isso. Você também pode fazer um objeto wrapper que registra os campos e anexa ao FormData e, em seguida, verifica os valores (sem se esquecer de enviar o FormData interno em vez do objeto wrapper).
Jesper
1
Pelo menos posso verificar se o formdataobjeto tem um arquivo dentro?
MarceloBarbosa
1
@MarceloBarbosa: Parece que você não consegue obter nenhuma informação dele. Você apenas terá que manter essas informações sozinho.
Jesper
Como apontado por @Jesper você pode verificar a solicitação XHR enviada na aba rede das ferramentas do desenvolvedor, existe a opção Params que permite até mesmo ver o conteúdo da solicitação POST enviada. Também a resposta.
Anirudh
23

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){
    //...
}
CodeGodie
fonte
17

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

DevTools do Chrome

madhu131313
fonte
5

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

Dulanga Heshan
fonte
2

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();
Ramadanoski Julie
fonte
2

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)} 
 />
7urkm3n
fonte