如何在Nuxtjs 3中的POST请求中发送表单数据

Question

我正在开发一个静态网站，但我需要联系表单，该表单应该将表单数据发送到电子邮件，我使用 nuxtjs 3，已尝试使用useFetch()，我也尝试使用axios。

这是我所拥有的

联系 Vue 模板

<template>
  <section id="ng-ctt" class="ng-ctt">
    <div class="ng-ct">
      <div class="ng-fx">
        <div class="ng-fx6-m">
          <figure class="ng-ctt-img">
            <img src="~/assets/media/illustrations/contact.svg" alt="ctt img" class="ng-img">
          </figure>
        </div>
        <div class="ng-fx6-m">
          <div class="ng-fxc">
            <div class="ng-ctt-text">
              <span class="ng-title">Mail</span>
              <NuxtLink to="mailto:hi@paddi.ng" class="ng-link">hi@paddi.ng</NuxtLink>
            </div>

            <div class="ng-ctt-text">
              <span class="ng-title">Location</span>
              <span class="ng-text">Lagos, Nigeria</span>
            </div>
           
            <div class="ng-ctt-text">
              <span class="ng-ctt-text-or">OR</span>
            </div>

            <form @submit.prevent="submitForm" id="ng-fm" class="ng-fm">
              <div class="ng-fm-row">
                <input type="text" v-model="formData.full_name" class="ng-inp" placeholder="Full Name">
              </div>
              <div class="ng-fm-row">
                <input type="text" v-model="formData.email" class="ng-inp" placeholder="Email">
              </div>
              <div class="ng-fm-row">
                <input type="text" v-model="formData.phone_no" class="ng-inp" placeholder="Phone Number">
              </div>
              <div class="ng-fm-row">
                <input type="text" v-model="formData.service" class="ng-inp" placeholder="Service">
              </div>
              <div class="ng-fm-row">
                <textarea name="" v-model="formData.message" class="ng-inp" placeholder="Message"></textarea>
              </div>
              <div class="ng-fm-row">
                <button class="ng-bt-pri" type="submit">Send Message</button>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </section>
</template>

联系脚本

<script lang="ts" setup>
  interface formData {
    full_name: string,
    email: string,
    phone_no: string,
    service: string,
    message: string,
  }

  let formStatus: {} = {
    loading: false,
    success: false,
    error: false,
  }

  let formData: formData = {
    full_name: "",
    email: "",
    phone_no: "",
    service: "",
    message: "",
  };

  async function submitForm() {

    // console.log(data);
    // console.log(JSON.stringify(formData));
    // this.formStatus.loading = true,
    // await this.$axios.$post("/api/contact", {
    //   full_name: this.full_name,
    //   email: this.email,
    //   phone_name: this.phone_name,
    //   service: this.service,
    //   message: this.message
    // }).then(response => {
    //   this.success = true
    //   this.errored =false
    // }).catch(error => {
    //   this.errored = true
    // }).finally(() => {
    //   this.loading = false
    // });
  }

  // return {
  //   formData: formData
  // }

</script>

主要问题是如何在 Nuxtjs 3 中的 POST 请求中发送表单数据。

Answer 1

我用 FormData 尝试了同样的方法...但我最终将参数作为 json 正文发送。

我使用$fetchNuxt3提供的功能。
我的表单提交方法如下所示。

methods: {
    formSubmit() {

        this.formRequest().then( (result) => {
            console.log(result)
        }).catch( (error) => {
            console.error('Contact form could not be send', error)
        });
    },

    async formRequest() {

        return await $fetch( <your-form-endpoint>, { 
            headers: {
                "Content-Type": "multipart/form-data",
            },
            method: 'POST',
            body: {
                'message': <your-form-data>,
                'name': <your-form-data>
            }
        } );
    }
}

就我而言，有必要将 CORS 设置Content-Type为multipart/form-data令人头疼的问题。希望对你有一点帮助。