错误消息：无效的表单输入消息错误问题

Question

我有一个 Strapi 后端和一个 React 前端。我的 Strapi 后端具有以下用于 Dogs 集合类型的 json 字段：

id, 
Breed,  
Name,       
image,  

在我的前端创建新的 Dog 对象时，我遇到了生成以下错误的输入字段之一：

statusCode：400，错误：“错误请求”，消息：“无效的‘数据’字段。 'data' 应该是有效的 JSON。”

这只发生在接受品种的输入字段中，如果品种输入字段不存在，则名称和文件上传的输入字段有效。

这是我的文件 Create.js 的代码

import React, { useState } from 'react'

export default () => {
  const [Breed, setBreed] = useState('')
  const [Name, setName] = useState('')

  const [file, setFile] = useState(null)

  console.log('file', file)

  const handleSubmit = async (event) => {
    event.preventDefault()

    const formData = new FormData()
    formData.append('data', JSON.stringify({ Breed }))
    formData.append('data', JSON.stringify({ Name }))

    formData.append('files.image', file)

    const response = await fetch('http://localhost:1337/dogs', {
      method: 'POST',
      body: formData,
    })
    const data = await response.json()
    console.log('data', data)
  }

  return (
    <div className='Create'>
      <h2>Create</h2>
      <form action='' onSubmit={handleSubmit}>
        <input
          type='text'
          placeholder='Breed'
          value={Breed}
          onChange={(event) => setBreed(event.target.value)}
        />
        <br />
        <input
          type='text'
          placeholder='Name'
          value={Name}
          onChange={(event) => setName(event.target.value)}
        />
        <br />
        <input
          type='file'
          placeholder='Add a image'
          onChange={(event) => setFile(event.target.files[0])}
        />
        <br />
        <button>Submit</button>
      </form>
    </div>
  )
}

我的代码中缺少什么？

Answer 1

您的 formData 将像这样发送，例如：data : {"Bred":"test"} data : {"Name" : "test"} 因为 content-type for formData 始终是 multipart/form-data 。问题是你如何在服务器端处理这个？我的猜测是您只获取了一个数据值，因此您得到error 400，因为没有正确读取第二个值。据我所知，有两种方法可以解决这个问题：

1. 使用不同的键添加JSON数据，例如：

   formData.append('breedtest', JSON.stringify({ Breed }))

   formData.append('nametest', JSON.stringify({ Name }))

然后像这样发送：

const response = await fetch('http://localhost:1337/dogs', {
      method: 'POST',
      body: formData,
    })

比在服务器端处理它更容易。

或

1. 像这样从 formData 创建 JSON 对象：

   formData.append("Breed", Breed ); formData.append("Name", Name );

const json = JSON.stringify(Object.fromEntries(formData));

并发送json 对象作为您的请求正文。

const response = await fetch('http://localhost:1337/dogs', {
      method: 'POST',
      headers: {
      'Content-Type': 'application/json'},
      body: json,
    })