FormData.append(“ key”、“ value”)が機能していません


106

これの何が悪いのか教えてください:

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

出力は次のようになります。「キー」と「値」のペアが見つかりません

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

理解できません!昨日はとてもうまくいきました、そして今日、私の頭はキーボードを何度もぶつけました!Firefox、Chrome、両方同じ:/

回答:


127

Chrome 50以降およびFirefox 39以降(それぞれ44以降)の新機能:

  • formdata.entries()Array.from()デバッグ可能性と組み合わせる)
  • formdata.get(key)
  • そして、非常に便利な方法

元の答え:

FormDataオブジェクトを「デバッグ」するために私が通常行うのは、オブジェクトを(どこでも!)送信し、ブラウザのログ(例:Chrome devtoolsの[ネットワーク]タブ)を確認することです。

同じAjaxフレームワークは必要ありません。詳細は必要ありません。送信してください:

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

簡単です。


ありがとう-これは、Chromeコンソールに入力してFormDataオブジェクトを取得する便利な方法でした。
Dan Smart

Googleによると、 formDataメソッドはChrome v50で追加されました。
thdoan

Safariのようなモバイルブラウザーの場合、ブラウザーログをどのように見ますか?モバイル用のWebアプリでFormDataオブジェクトを使用していますが、デバッグ方法がわかりません。
kiwicomb123 2016

1
@ kiwicomb123 Formdata.entries()+ Array.from()+ alert()十分にモダンである場合、またはモバイルデバッグを
Rudie

だからエッジもIE11もない?
SuperUberDuper 2017年

50

あなたはそれが機能していないと言います。何が起こると思いますか?

FormDataオブジェクトからデータを取り出す方法はありません。これは、XMLHttpRequestsendメソッドの)オブジェクトと共にデータを送信するために使用することを目的としています。

ほぼ5年後の更新:一部の新しいブラウザーではこれは当てはまらず、FormDataデータをそこに詰め込むだけでなく、提供されたデータを表示できるようになりました。詳しくは、承認された回答をご覧ください。


20
わかりました...これは最悪です。コンソールにFormDataを記録できないのはなぜですか?私はそれが一般的なオブジェクトであると思ったので、:-(これはちょうど、私には意味がありません
netzaffin

12
@netzaffin:FirebugとChromeの両方のインスペクターを使用すると、ネットワークタブを開いてログ記録を開始している限り、XHRリクエストで送信されたリクエストパラメーターを確認できるので、それでうまくいくはずです。フィールドをログに記録してFormDataに追加するラッパーオブジェクトを作成し、値を確認することもできます(ラッパーオブジェクトの代わりに内部のFormDataを送信することを忘れないでください)。
Jesper

1
少なくとも、formdataオブジェクトにファイルがあるかどうかを確認できますか?
MarceloBarbosa 2015

1
@MarceloBarbosa:それから情報を得ることができないようです。この情報は自分で保持する必要があります。
Jesper、

@Jesperで指摘されているように、開発者ツールのネットワークタブタブで送信されたXHRリクエストを確認できます。そこには、送信されたPOSTリクエストの内容を確認できるParamsオプションもあります。レスポンスも。
Anirudh 2016年

23

あなたは私が最初に抱えていたのと同じ問題を抱えていたかもしれません。FormDataを使用してすべての入力ファイルを取得して画像をアップロードしようとしましたが、同時に、サーバーに渡される情報にセッションIDを追加したいと思っていました。これまでずっと、情報を追加することで、オブジェクトにアクセスすることでサーバーで情報を表示できると思いました。私は間違っていた。FormDataに追加する場合、サーバー上の追加情報を確認する方法は、単純な$_POST['*your appended data*']クエリです。そのようです:

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

次にphpで:

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

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

17

Chromeを使用している場合は、投稿データを確認できます

投稿データの確認方法はこちら

  1. [ネットワーク]タブに移動します
  2. 投稿データの送信先のリンクを探します
  3. クリックして
  4. ヘッダーでは、リクエストペイロードをチェックして投稿データをチェックできます

ChromeのDevTools



5

フォームデータがWebブラウザーコンソールに表示されない

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

表示されるようにこの方法を試してください


2

Edgeブラウザーでの私の場合:

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

同じエラーを出して

だから私は使用FormDataしておらず、オブジェクトを手動でビルドするだけです

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]":"customer@mail.com" => "user":{"email":"customer@mail.com"}

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

2

反応バージョン

ヘッダーがあることを確認してください '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
    });
  }

見る

  #html
 <input className="form-control"
    type="file" 
    onChange={(e)=>this._handleImageChange(e)} 
 />
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.