Sveltekit 制作联系表单的端点问题

Arm*_*196 1 javascript endpoint svelte sveltekit

我正在制作联系表格,但收到错误 POST http://localhost:3000/contact.json 500 (Internal Server Error)at contactform.svelte:5。这是什么contactform.svelte

<script>
    const submitForm = async(data) => {
        const formData = new FormData(data.currentTarget);

        const res = await fetch("contact.json", {
            method: "POST",
            body: formData,
        });
    };
</script>

<form on:submit|preventDefault={submitForm}>
    <div>
        <label for="">
            What's your name?
            <input type="text" name="name">
        </label>
    </div>

    <div>
        <label for="">
            What's your Email or Phone #?
            <input type="email" name="email">
            <input type="text" name="phone">

        </label>
    </div>

    <div>
        <label for="">
            What would you like to tell us?
            <input type="text" name="message">
        </label>
    </div>

    <div>
        <input type="submit">
    </div>
</form>    
Run Code Online (Sandbox Code Playgroud)

在我的终端中,我有另一个错误:

To access the request body use the text/json/arrayBuffer/formData methods, e.g. `body = await request.json()`. See https://github.com/sveltejs/kit/pull/3384 for details
Error: To access the request body use the text/json/arrayBuffer/formData methods, e.g. `body = await request.json()`. See https://github.com/sveltejs/kit/pull/3384 for details
    at Object.get (file:///C:/Users/chian/Desktop/site/.svelte-kit/runtime/server/index.js:2662:10)
    at post (C:\Users\chian\Desktop\site\src\routes\contact.json.js:2:26)
    at render_endpoint (file:///C:/Users/chian/Desktop/site/.svelte-kit/runtime/server/index.js:157:25)
    at resolve (file:///C:/Users/chian/Desktop/site/.svelte-kit/runtime/server/index.js:2743:17)
    at async respond (file:///C:/Users/chian/Desktop/site/.svelte-kit/runtime/server/index.js:2688:20)
    at async file:///C:/Users/chian/Desktop/site/node_modules/@sveltejs/kit/dist/chunks/index.js:299:24
Run Code Online (Sandbox Code Playgroud)

这是 contact.json.js:

export const post = async(request) => {
    const name = request.body.get("name");
    const email = request.body.get("email");
    const phone = request.body.get("phone");
    const message = request.body.get("message");

    const res = await fetch(`https://docs.google.com/forms/d/e/1AFIpQLSfx-JOL3dNrjWL-raYmT4ay_TIT6xfFVBXaZ5R_m8RB-G_Ang/formResponse?usp=pp_url&entry.1204260556=${name}&entry.1586743587=${email}&entry.807821212=${phone}&entry.1059243301=${message}&submit=Submit`);

    console.log(res);
};
Run Code Online (Sandbox Code Playgroud)

我按照教程写了这篇文章,说实话,我还没有掌握所有内容,因为我对后端和整体来说还是个新手,希望解决这个问题能让我深入了解一切是如何工作的。如果你们知道如何解决这个问题,请告诉我。

Ste*_*aes 6

由于您要传递 formData,因此应该使用正确的方法:

const data = await request.formData();
const name = data.get("name");
Run Code Online (Sandbox Code Playgroud)

或者,您可以从 formData 创建一个对象:

const data = Object.fromEntries(await request.formData());
console.log(data.name);
Run Code Online (Sandbox Code Playgroud)