表单提交form-data类型

一、借助form提交

<!-- 登录表单 -->
<div class="form-container">
    <form action="login.php" method="POST">
        <h2>登录</h2>
        <label for="username">账号</label>
        <input type="text" id="username" name="username" placeholder="请输入账号" required>

        <label for="password">密码</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" required>

        <button type="submit" class="login-btn">登录</button>
        <a href="index.html">退回主页</a></p>
    </form>
</div>


// 监听表单提交事件
form.addEventListener('submit', async function (event) {
    event.preventDefault();  // 阻止表单默认提交行为

    const username = usernameInput.value;
    const password = passwordInput.value;

    try {
        const response = await fetch('http://url', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: username,
                password: password
            }),
            credentials: 'include'  // 包含认证信息
        });

        const data = await response.json();

       
    } catch (error) {
        console.error('Error:', error);
        errorMessage.textContent = "服务器连接失败";
        errorMessage.style.display = 'block';
    }
});

二、手动提交form-data格式

 confirmVisible() {
    this.Form.validate((valid: boolean) => {
      if (valid) {
        const formData = new FormData();
        let file = this.formData.file.length > 0 ? this.formData.file[0] : {};
        formData.append('userName', this.formData.userName);
        formData.append('email', this.formData.email);
        formData.append('phone', this.formData.phone);
        formData.append('companyName', this.formData.companyName);
        formData.append('area', this.formData.area);
        formData.append('period', this.formData.period);
        formData.append('remark', this.formData.remark);
        formData.append('file', file);
        console.log(formData, 'formData');
        axios
          .post(process.env.VUE_APP_URL + '/url', formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          })
          .then(res => {
            if (res.data.code === 200) {
              this.$message({
                showClose: true,
                message: '操作成功!',
                type: 'success',
              });
              // this.$router.push({ path: '/admin-index' });
            }
          })
          .catch((error: Error) => {
            // 处理错误
            this.$message.error(error);
          });
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  }