Почему конструктор FormData() не работает

У меня есть этот код для входа. Когда я отлаживаю код, я проверяю, что конструктор FormData() ничего не возвращает, он пустой. Что я делаю неправильно? Константа formLog собирает данные формы, но после передачи их конструктору FormData() возвращаемый объект оказывается пустым.

<form id="login" method="post" enctype="multipart/form-data" name="login">
    <input type="email" name="email" placeholder="Tu email">
    <br><br>
    <input type="password" name="password" placeholder="Tu contraseña">
    <br><br>
    <input type="submit" value="Login">
</form>

<script type="text/javascript">
    const formLog = document.querySelector('#login')
    //Creamos un objeto con los datos del formulario

    // AL formLog le agregamos un evento 
    formLog.addEventListener('submit',event =>{
        event.preventDefault()
        const data = new FormData(formLog)       
        fetch('/api/signin',{
            method:'POST',
            body: data,
        })
        .then(res => {
            res.json()
        })
        .then(resData => {
            localStorage.setItem('token', resData.token)
        })
    })
</script>

javascript fetch form-data
person José Espejo Roig    schedule 21.01.2019    source источник
comment
Используйте это, и вы увидите, что data действительно содержит данные формы. Вы также можете проверить параметры XHR в консоли, и она также покажет имена и значения.   -  person Chris G    schedule 22.01.2019

Ответы (1)


arrow_upward
-1
arrow_downward

Использование синтаксиса распространения позволит получить все значения из вашего объекта FormData. Затем используйте Array#reduce и деструктуризация для организации всего в пределах простого объекта .

const form = document.getElementById("login");

form.addEventListener("submit", function(e){
  e.preventDefault();
  
  const data = [...new FormData(this)]
  .reduce((a,[key,value])=>{
    a[key] = value;
    return a;
  }, {});
  
  console.log(data);
});
<form id="login" method="post" enctype="multipart/form-data" name="login">
    <input type="email" name="email" placeholder="Tu email" value="[email protected]">
    <br><br>
    <input type="password" name="password" placeholder="Tu contraseña" value="some password">
    <br><br>
    <input type="submit" value="Login">
</form>

person kemicofa ghost    schedule 22.01.2019
comment
@JoséEspejoRoig нет проблем. Не забудьте отметить как правильный ответ. Ваше здоровье. - person kemicofa ghost; 22.01.2019