FormData.append ("clé", "valeur") ne fonctionne pas

107

Pouvez-vous me dire ce qui ne va pas avec ceci:

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

Ma sortie ressemble à ceci, je ne trouve pas ma paire «clé» - «valeur»

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

Je ne comprends pas! Hier, cela fonctionnait si bien, et aujourd'hui ma tête a heurté le clavier tant de fois! Firefox, Chrome, tous les deux identiques: /

netzaffin
la source

Réponses:

127

Nouveautés de Chrome 50+ et Firefox 39+ (resp.44+):

  • formdata.entries()(combiner avec Array.from()pour le débogage)
  • formdata.get(key)
  • et des méthodes plus utiles

Réponse originale:

Ce que je fais habituellement pour «déboguer» un FormDataobjet, c'est simplement l'envoyer (n'importe où!) Et vérifier les journaux du navigateur (par exemple l'onglet Réseau de Chrome devtools).

Vous n'avez pas besoin du même framework Ajax. Vous n'avez besoin d'aucun détail. Envoyez-le simplement:

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

Facile.

Rudie
la source
merci - c'était un moyen rapide et utile d'obtenir l'objet FormData en le saisissant dans la console Chrome.
Dan Smart
Selon Google, des méthodes formData ont été ajoutées dans Chrome v50.
thdoan
Comment regarderiez-vous les journaux du navigateur s'il s'agit d'un navigateur mobile comme Safari? J'utilise l'objet FormData dans une application Web destinée aux mobiles et je ne sais pas comment le déboguer.
kiwicomb123 du
1
@ kiwicomb123 Formdata.entries()+ Array.from()+ alert()si c'est assez moderne, ou regardez dans le débogage mobile
Rudie
donc pas de bord ou ie11?
SuperUberDuper
50

Vous dites que ça ne marche pas. À quoi vous attendez-vous?

Il n'y a aucun moyen d'extraire les données d'un FormDataobjet; il est simplement destiné à être utilisé pour envoyer des données avec un XMLHttpRequestobjet (pour la sendméthode).

Mise à jour près de cinq ans plus tard: dans certains navigateurs plus récents, ce n'est plus le cas et vous pouvez maintenant voir les données fournies FormDataen plus de simplement y insérer des données. Voir la réponse acceptée pour plus d'informations.

Jesper
la source
20
OK ... ça craint. Pourquoi ne puis-je pas enregistrer FormData dans ma console? :-( Cela n'a aucun sens pour moi, car je pensais que c'était un objet commun
netzaffin
12
@netzaffin: Firebug et l'inspecteur de Chrome vous permettent de voir les paramètres de requête envoyés dans une requête XHR tant que vous avez ouvert l'onglet réseau et commencé à vous connecter, vous devriez donc pouvoir vous en tirer. Vous pouvez également créer un objet wrapper qui enregistre les champs et les ajoute au FormData, puis le vérifier pour les valeurs (sans oublier d'envoyer le FormData interne au lieu de l'objet wrapper).
Jesper
1
Au moins, puis-je vérifier si l' formdataobjet contient un fichier?
MarceloBarbosa
1
@MarceloBarbosa: Il ne semble pas que vous puissiez en tirer des informations. Vous devrez simplement conserver ces informations vous-même.
Jesper
Comme indiqué par @Jesper, vous pouvez vérifier la demande XHR envoyée dans l'onglet de l'onglet réseau des outils de développement, il y a l'option Params qui vous permet même de voir le contenu de la demande POST envoyée. Aussi la réponse.
Anirudh
23

Vous avez peut-être eu le même problème que celui que j'avais au départ. J'essayais d'utiliser FormData pour récupérer tous mes fichiers d'entrée pour télécharger une image, mais en même temps, je voulais ajouter un identifiant de session aux informations transmises au serveur. Pendant tout ce temps, j'ai pensé qu'en ajoutant les informations, vous pourrez les voir sur le serveur en accédant à l'objet. J'avais tort. Lorsque vous ajoutez à FormData, la façon de vérifier les informations ajoutées sur le serveur est par un simple$_POST['*your appended data*'] requête. ainsi:

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

puis sur php:

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

$foreach ($files as $key=>val){
    //...
}
CodeGodie
la source
17

Si vous êtes dans Chrome, vous pouvez vérifier les données de publication

Voici comment vérifier les données de publication

  1. Aller à l'onglet Réseau
  2. Recherchez le lien vers lequel vous envoyez les données de publication
  3. Clique dessus
  4. Dans les en-têtes, vous pouvez vérifier Request Payload pour vérifier les données de publication

Outils de développement de Chrome

madhu131313
la source
5

les données du formulaire n'apparaissent pas dans la console du navigateur Web

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

essayez de cette façon, il montrera

Dulanga Heshan
la source
2

Dans mon cas sur le navigateur Edge:

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

donne moi la même erreur

Donc je n'utilise pas FormDataet je construis juste manuellement un objet

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

Version de réaction

Assurez-vous d'avoir un en-tête avec '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
    });
  }

Vue

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