javascript - 为什么 FormData() 构造函数不起作用

Question

我有这个登录代码。 当我调试代码时，我检查 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>

Answer 1

使用spread syntax将从您的 FormData 对象中获取所有值。然后使用Array#reduce和 destructuring将所有内容组织在一个简单的对象中。

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="test@test.com">
    <br><br>
    <input type="password" name="password" placeholder="Tu contraseña" value="some password">
    <br><br>
    <input type="submit" value="Login">
</form>