SvelteKit表单自定义FormData后服务端无法获取指定字段问题

你当前的问题出在use:enhance的回调逻辑里：只是重新赋值了局部的formData变量，但没有把自定义的FormData传递给SvelteKit的表单提交流程——默认情况下，框架还是会使用原始的表单数据提交，所以服务端拿不到你添加的numero_chambre等字段。

下面是两种可行的解决方法：

方案一：直接修改原始FormData（推荐，保留原有可见字段） #

不需要完全新建FormData，而是基于传入的原始formData追加自定义字段，这样既能保留页面上可见的表单输入值，又能补充被{#if}移除的字段：

<form
  action="?/newReservation"
  method="POST"
  use:enhance={({ formData }) => {
    const datesArr = dates;
    const debut = datesArr[0];
    const fin = datesArr[1];

    // 追加用户信息字段
    formData.append("nom", nom);
    formData.append("prenom", prenom);
    formData.append("email", email);

    // 追加预订信息字段
    formData.append("debut", debut);
    formData.append("fin", fin);
    formData.append("numero_chambre", JSON.stringify(bedroomsChoosen));
    formData.append("total", total.toString());
    formData.append("nb_petit_dejeuner", nombrePetitDejeuner.toString());
    formData.append("jours_petit_dejeuner", JSON.stringify(joursPetitDejeuner));
    formData.append("heure_petit_dejeuner", heurePetitDejeuner);

    console.log(formData.get('numero_chambre'));

    return async ({ result, update }) => {
      console.log(result, update);
    };
  }}
>
...
</form>

方案二：返回自定义FormData替换原始数据 #

如果你需要完全替换默认的表单数据，要在use:enhance的回调里返回一个包含formData属性的对象，明确告诉SvelteKit使用你自定义的表单数据：

首先修改manageFormData函数，支持接收原始表单数据并合并：

const manageFormData = (originalFormData): FormData => {
    // 基于原始表单数据创建新实例，保留已有字段
    let data = new FormData(originalFormData);

    let datesArr = dates;
    let debut = datesArr[0];
    let fin = datesArr[1];

    // 用户信息
    data.append("nom", nom);
    data.append("prenom", prenom);
    data.append("email", email);

    // 预订信息
    data.append("debut", debut);
    data.append("fin", fin);
    data.append("numero_chambre", JSON.stringify(bedroomsChoosen));
    data.append("total", total.toString());
    data.append("nb_petit_dejeuner", nombrePetitDejeuner.toString());
    data.append("jours_petit_dejeuner", JSON.stringify(joursPetitDejeuner));
    data.append("heure_petit_dejeuner", heurePetitDejeuner);

    console.log(data.get('numero_chambre'));
    return data;
};

然后在表单的use:enhance中传递并返回自定义FormData：

<form
  action="?/newReservation"
  method="POST"
  use:enhance={({ formData }) => {
    const customFormData = manageFormData(formData);
    console.log(customFormData.get('numero_chambre'));

    // 返回包含自定义formData的对象，替换默认提交数据
    return {
      formData: customFormData,
      async update({ result, update }) {
        console.log(result, update);
      }
    };
  }}
>
...
</form>

服务端验证示例 #

在+page.server.ts的action中，你可以直接通过request.formData()获取所有字段：

import type { Actions } from './$types';

export const actions: Actions = {
  newReservation: async ({ request }) => {
    const formData = await request.formData();
    const numero_chambre = formData.get('numero_chambre');
    console.log(numero_chambre); // 现在能正确获取值

    // 后续业务逻辑处理
    return { success: true };
  }
};

内容的提问来源于stack exchange，提问作者Eli-ott