为什么这是一个糟糕的请求反应原生 axios put 请求

Question

为什么这个请求是一个错误的请求，我在邮递员中发送了相同的请求，使用原始数据和标头内容类型 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')
  }
}

这是服务器端代码，在使用邮递员测试时有效。使用 form-data 发送时不起作用，但在 body 是 raw 和 application/json 的 header 时起作用

        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',

    ]);

}

Answer 1

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

在标题中包含 'content-type': 'application/json' 然后在正文中不发送 JSON 并没有帮助，这是一个相当合理的赌注。

FormData 对象用于生成 multipart/form-data 请求正文，而不是 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" }
};

Answer 2

将标题更改为

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

您没有发送 JSON 数据。