如何修复Vue调用Strapi时「请求缺少data payload」错误及文件上传问题

1. 修复"Missing 'data' payload in the request"错误 #

你的代码里存在拼写错误：fetch配置中的header应为headers（复数形式），这个错误会导致请求头无法正确设置，Strapi无法解析请求体，从而抛出缺失data的错误。

同时，由于需要上传文件，JSON格式的请求无法满足需求，必须切换到FormData格式，这也是实现文件上传的核心要求。

2. 文件上传的FormData正确用法 #

Strapi接收包含文件的POST请求时，需遵循以下规范：

• 普通字段以data[字段名]的形式追加到FormData，字段名要与Strapi模型定义的字段完全匹配
• 文件字段以files[字段名]的形式追加，字段名需对应Strapi模型中的媒体字段名

修正后的完整代码 #

<script setup>
import { ref } from 'vue';

// 表单字段响应式变量
const fullName = ref('');
const emailAddress = ref('');
const phoneNumber = ref('');
const uploadPhoto = ref(null);
const location = ref('');
const merchantId = ref('');
const acuityLink = ref('');
const acuityId = ref('');
const acuityKey = ref('');

// 文件选择事件处理
const handleFileChange = (event) => {
  uploadPhoto.value = event.target.files[0];
};

// 表单提交逻辑
const submitForm = async () => {
  try {
    const formData = new FormData();
    
    // 追加普通表单字段
    formData.append('data[StoreName]', fullName.value);
    formData.append('data[StoreLocation]', location.value);
    formData.append('data[merchant_id]', merchantId.value);
    formData.append('data[ActuityLink]', acuityLink.value);
    formData.append('data[PhoneNumber]', phoneNumber.value);
    formData.append('data[ActuityKey]', acuityKey.value);
    formData.append('data[ActuityID]', acuityId.value);
    formData.append('data[EmailAddress]', emailAddress.value); // 补上之前遗漏的邮箱字段
    
    // 追加文件字段（存在文件时）
    if (uploadPhoto.value) {
      formData.append('files[uploadPhoto]', uploadPhoto.value);
    }

    const response = await fetch('http://localhost:1337/api/barbers-stores', {
      method: 'POST',
      headers: {
        Authorization: 'Bearer ...' // 替换为你的有效Strapi API令牌
        // 无需手动设置Content-Type，浏览器会自动为FormData生成正确的请求头
      },
      body: formData
    });

    const data = await response.json();
    console.log('提交成功:', data);
  } catch (error) {
    console.error('提交失败:', error);
  }
};
</script>

<template>
  <section class="container">
    <header>Registration Form</header>
    <form action="#" class="form">
      <div class="input-box">
        <label>Full Name</label>
        <input type="text" placeholder="Enter full name" v-model="fullName" required />
      </div>
      <div class="input-box">
        <label>Email Address</label>
        <input type="text" placeholder="Enter email address" v-model="emailAddress" required />
      </div>
      <div class="input-box">
        <label>Phone Number</label>
        <input type="number" placeholder="Enter phone number" v-model="phoneNumber" required />
      </div>
      <!-- 新增字段 -->
      <div class="input-box">
        <label>Upload Photo</label>
        <input type="file" accept="image/*" @change="handleFileChange" required />
      </div>
      <div class="input-box">
        <label>Location</label>
        <input type="text" placeholder="Enter location" v-model="location" required />
      </div>
      <div class="input-box">
        <label>Merchant ID</label>
        <input type="text" placeholder="Enter Merchant ID" v-model="merchantId" required />
      </div>
      <div class="input-box">
        <label>Acuity Username</label>
        <input type="text" placeholder="Enter Acuity Username" v-model="acuityLink" required />
      </div>
      <div class="input-box">
        <label>Acuity ID</label>
        <input type="text" placeholder="Enter Acuity ID" v-model="acuityId" required />
      </div>
      <div class="input-box">
        <label>Acuity Key</label>
        <!-- 修复v-model绑定错误：之前错误绑定到acuityId -->
        <input type="text" placeholder="Enter Acuity Key" v-model="acuityKey" required />
      </div>
      <!-- 新增字段结束 -->
      <button @click.prevent="submitForm">Submit</button>
    </form>
  </section>
</template>

关键注意事项 #

• 请求头设置：使用FormData时不要手动设置Content-Type，浏览器会自动生成正确的multipart/form-data请求头
• 字段匹配：确保data[字段名]和files[字段名]中的字段名与Strapi后台barbers-stores模型的定义完全一致（包括大小写）
• 令牌替换：将Authorization头中的...替换为你在Strapi后台生成的有效API令牌
• 表单绑定修复：修正了Acuity Key字段的v-model绑定错误，确保数据能正确收集

内容的提问来源于stack exchange，提问作者George Marwanqana