Javascript 为什么这是一个错误的请求

为什么这个请求是一个错误的请求，我已经在postman中发送了相同的请求，使用了原始数据和头内容类型applications/json，它可以正常工作。 但在我的axios请求中，我收到了错误的请求

const update = dispatch => {

  return async (name, email, phone, picture, Age, Blood, Gender, Height, Weight, id) => {
    const data = new FormData();

    data.append('name', name);
    data.append('email', email);
    data.append('phone', phone);
    data.append('Age', Age);
    data.append('Blood', Blood);
    data.append('Gender', Gender);
    data.append('Height', Height);
    data.append('Weight', Weight);
    data.append("picture", {
      type: 'image/jpg',
      uri: picture,
      name: 'profilepic.jpg'
    });
    const config = {
      method: 'put',
      url: `http://c256474d.ngrok.io/api/userregister/24`,
      data: data,
      headers: { 'content-type': 'application/json' }

    }


    await axios(config)
    navigate('UserAccount')
  }
}

这是服务器端代码，在使用postman进行测试时有效。它在使用表单数据发送时不起作用，但在主体是原始的并且是application/json的头时起作用

        public function update(Request $request, $id)
      {
       // dd($request->all());
        $validator = Validator::make($request->all(), [
        'name' => 'required|string|max:255',
        'email' => 'string|email|max:255',
        'phone' => 'string|min:6',
        'Age' => 'string',
        'Blood' => 'string',
        'Gender' => 'string',
        'Height' => 'string',
        'Weight' => 'string',
        'record' => 'string'
    ]);

    if($validator->fails()){
            return response()->json($validator->errors()->toJson(), 400);
    }

    $doc = User::find($id);

    if($request->hasFile('picture')){
        // Get filename with the extension
        $filenameWithExt = $request->file('picture')->getClientOriginalName();
        // Get just filename
        $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
        // Get just ext
        $extension = $request->file('picture')->getClientOriginalExtension();
        // Filename to store
        $fileNameToStore= $filename.'_'.time().'.'.$extension;
        // Upload Image
        $path = $request->file('picture')->storeAs('public/images', $fileNameToStore);
    } else {
        $fileNameToStore = 'noimage.jpg';
    }

    $doc->name = $request->input('name');
      $doc->email = $request->input('email');
      $doc->phone = $request->input('phone');
      if($request->hasFile('picture')){
        $doc->picture = $fileNameToStore;
        }



       $doc->save();

    return response()->json([
        'message' => 'Success',

    ]);

}

我们不知道为什么服务器认为数据不好，因为您没有共享做出该决定的服务器端代码

但是，在标题中包含

'content-type'：'application/json'

，然后在正文中不发送json，这是一个相当合理的赌注

FormData

对象用于生成

multipart/FormData

请求主体，而不是

application/json

如果要发送JSON，则需要生成JSON：

const data = {
  name: name,
  email: email,
  phone: phone,
  Age: Age,
  Blood: Blood,
  Gender: Gender,
  Height: Height,
  Weight: Weight,
  picture: {
    type: "image/jpg",
    uri: picture,
    name: "profilepic.jpg"
  }
};
const config = {
  method: "put",
  url: `http://c256474d.ngrok.io/api/userregister/24`,
  data: JSON.stringify(data),
  headers: { "content-type": "application/json" }
};

将标题更改为

{ headers: { 'Content-Type': 'multipart/form-data' } }

---

您没有发送JSON数据

您省略了

边界

参数。通过传递

FormData

，让底层XHR对象计算出内容类型，而不是显式的。另外，由于API需要JSON，所以这并没有真正的帮助。它仍然返回400个错误请求。您可以在我的问题中检查服务器端代码，我已将其包含在问题中