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

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.

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.

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

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

vous pouvez le voir que vous devez utiliser console.log(formData.getAll('your key')); regardez le https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

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

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

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