FormData.append («ключ», «значение») не работает

107

Вы можете сказать мне, что с этим не так:

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, оба одинаковые: /

Netzaffin
источник

Ответы:

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

Легко.

Руди
источник
спасибо - это был полезный быстрый способ получить объект FormData, набрав его в консоли Chrome.
Дэн Смарт
Согласно Google методы formData были добавлены в Chrome v50.
thdoan 01
Как бы вы смотрели журналы браузера, если это мобильный браузер, такой как Safari? Я использую объект FormData в веб-приложении, предназначенном для мобильных устройств, и не могу понять, как его отлаживать.
kiwicomb123
1
@ kiwicomb123 Formdata.entries()+ Array.from()+, alert()если он достаточно современный, или займитесь мобильной отладкой
Руди,
так что нет края или ie11?
SuperUberDuper
50

Вы говорите, что это не работает. Чего вы ожидаете?

Нет способа получить данные из FormDataобъекта; он просто предназначен для использования вами для отправки данных вместе с XMLHttpRequestобъектом (для sendметода).

Обновите почти пять лет спустя: в некоторых новых браузерах это больше не так, и теперь вы можете видеть предоставленные данные FormDataв дополнение к тому, что они просто загружаются в них. См. Принятый ответ для получения дополнительной информации.

Джеспер
источник
20
Хорошо ... это отстой. Почему я не могу зарегистрировать FormData в своей консоли? :-( Это просто не имеет смысла для меня, так как я думал, что это обычный объект
netzaffin
12
@netzaffin: и Firebug, и инспектор Chrome позволяют вам видеть параметры отправленного запроса в запросе XHR, если вы открыли вкладку сети и начали регистрацию, так что вы сможете обойтись этим. Вы также можете создать объект-оболочку, который регистрирует поля и присоединяется к FormData, а затем проверяет это на предмет значений (не забывая отправлять внутренние FormData вместо объекта-оболочки).
Jesper
1
По крайней мере, можно проверить, formdataесть ли внутри объекта файл?
MarceloBarbosa
1
@MarceloBarbosa: Не похоже, чтобы вы могли извлечь из этого какую-либо информацию. Вам просто нужно сохранить эту информацию самостоятельно.
Джеспер
Как указано в @Jesper, вы можете проверить отправленный запрос XHR на вкладке сети в инструментах разработчика, там есть опция Params, которая даже позволяет вам видеть содержимое отправленного запроса POST. Также ответ.
Anirudh
23

Возможно, у вас была та же проблема, что и у меня изначально. Я пытался использовать FormData, чтобы получить все мои входные файлы для загрузки изображения, но в то же время я хотел добавить идентификатор сеанса к информации, передаваемой на сервер. Все это время я думал, что добавив информацию, вы сможете увидеть ее на сервере, обратившись к объекту. Я ошибался. Когда вы добавляете данные к 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){
    //...
}
CodeGodie
источник
17

Если вы находитесь в Chrome, вы можете проверить данные публикации

Вот как проверить данные публикации

  1. Перейдите на вкладку "Сеть"
  2. Найдите ссылку, по которой вы отправляете данные публикации
  3. Нажмите здесь
  4. В заголовках вы можете проверить Request Payload, чтобы проверить данные публикации.

Инструменты разработчика Chrome

мадху131313
источник
5

данные формы не отображаются в консоли веб-браузера

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)} 
 />
7уркм3н
источник