2

Вопрос из любопытства, почему данные в экземпляре FormData не видны при выводе в консоль, но при этом они видны во вкладке Network? Вывод в консоль делал непосредственно перед отправкой, объект один и тот же.

введите сюда описание изображения

// выдержки из кода компонента Vue

const formData = new FormData();
Object.keys(this.data).forEach(key => {
  formData.append(key, this.data[key]);
})
console.log(formData)

//метод отправляющий post-запрос на сервер.
this.$API.post(path, formData, {'Content-Type': 'multipart/form-data'}).then()...

//под капотом используется axios
//.. выдержка из конструктора
post(path, payload, headers = { 'Content-Type': 'application/json' }) {
  return this.service.request({
    headers,
    method: 'POST',
    url: path,
    responseType: 'json',
    data: payload,
  });
}
5
  • добавь немного кода, как ты отправлял и лог делал
    – Grundy
    18 дек 2018 в 11:45
  • @Grundy, сделал
    – Dmytro
    18 дек 2018 в 12:07
  • Не видно потому что на момент просмотра данный объект уже пустой (в логе ссылка)
    – JavaJunior
    18 дек 2018 в 12:14
  • @JavaJunior, я тоже так думал и пробовал исключить какие либо действия, после вывода - результат тот же. В комментариях к первому ответу @eustatos, сказал что данные полей формы - приватные переменные объекта FormData- и это очень похоже на правду
    – Dmytro
    18 дек 2018 в 12:19
  • @Дмытрык, судя по всему такая реализация в браузере. Вот тут несколько вариантов обычно с помощью цикла советуют, но есть и интересный ответ :)
    – Grundy
    18 дек 2018 в 12:20

2 ответа 2

3

Для вывода содержимого у FormData есть методы

const form = document.forms['example-form'];


const exampleInput = document.querySelector('[name="example"]');

exampleInput.addEventListener('change', changeHandler);

function changeHandler() {
  const formData = new FormData(form);
  for (key of formData.keys()) {
    console.log(`${key}: ${formData.get(key)}`);
  }
}
<form id="example-form">
  <input name="example">
</form>

2
  • держите +). Но я не спрашивал "как получить данные?", я спросил "почему их не видно"?
    – Dmytro
    18 дек 2018 в 11:21
  • Данные полей формы - приватные переменные объекта FormData. Публичные у него только методы.
    – eustatos
    18 дек 2018 в 11:26
2

Так как FormData является интерфейсом, предоставляемым браузером, внутренняя организация может зависеть от конкретных браузеров.

В дополнение к этому, вывод console.log, так же не специфицирован, что еще добавляет возможности различного вывода в различных браузерах.

Что можно увидеть в консоли chrome?

  1. прототип установлен в FormData
  2. в прототипе присутствуют все методы описанные в спецификации.

остальной вывод производится на усмотрение конкретного браузера.

Если посмотреть в спецификации, у каждого объекта FormData есть ассоциированный список со значениями.

Так как он ассоциированный, то может не являться частью объекта, следовательно текущий вывод вполне оправдан.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.