how to send multipart data in axios with Laravel api

I am using axios.post method to send the data to the server. i make the larvel api. When i check that api in postman, it was working fine. but when i connect that api in frontend it send all data to the backend except my image file. below i mention the code that send the image file to the server. Please check carefully my code and help me out where i am doing wrong. I stuck in this problem since two days.

frontEnd code

  const params = useParams();
  const { some } = params;

  const [name, setName] = useState("");
  const [school, setSchool] = useState("");
  const [author, setAuthor] = useState("");
  const [grade, setGrade] = useState("");
  const [Extra, setExtra] = useState("");
  const [image, setImage] = useState("");

 
  if (some === "book") {
    const handleSubmit = async (e) => {
   e.preventDefault();
  const formData = new FormData();
  formData.append("image", image);
  if (image == null) return image;
  console.log(image, name)

  const token = localStorage.getItem("Token")
  console.log(token)


  try {
    const res = await axios.post(
      `http://127.0.0.1:8000/add-product`,



      {
        formData,

        product_name: name,
        product_auther: author,
        school_name: school,
        class: grade,
        product_image: image,
        category_id: "17"



      },
      {
        headers:

          { "Authorization": `Bearer ${token}` },
          'Content-Type': 'multipart/form-data'   ,
      }



    ).then((res) => {
      console.log("usman    ", res)
    });
    console.log()

   } catch (error) {
    if (error.request) {
      console.log(error.response);

    } else if (error.request) {
      console.log("network error");
    } else {
      console.log("CBM", { error });
    }
  }
}

return (
  <div className="container " style=>
    <br>
    </br>
    <form onSubmit={handleSubmit} >
      <div className="mb-3">
        <label htmlFor="exampleInputEmail1" className="form-label"> Name</label>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
      </div>
      <div className="mb-3">
        <label htmlFor="exampleInputPassword1" className="form-label">Author</label>
        <input type="text" value={author} onChange={(e) => setAuthor(e.target.value)} className="form-control" id="exampleInputPassword1" />
      </div>
      <div className="mb-3">
        <label htmlFor="exampleInputPassword1" className="form-label">image</label>
        <input type="file" onChange={(e) => setImage(e.target.files[0])} className="form-control" id="exampleInputPassword1" />
      </div>
      <div className="mb-3">
        <label htmlFor="exampleInputPassword1" className="form-label">School Name</label>
        <input type="text" value={school} onChange={(e) => setSchool(e.target.value)} className="form-control" id="exampleInputPassword1" />
      </div>
      <div className="mb-3">
        <label htmlFor="exampleInputPassword1" className="form-label">Grade(Class)</label>
        <input type="text" value={grade} onChange={(e) => setGrade(e.target.value)} className="form-control" id="exampleInputPassword1" />
      </div>
      <div className="mb-3">
        <label htmlFor="exampleInputPassword1" className="form-label">Any Extra Information</label>
        <input type="text" value={Extra} onChange={(e) => setExtra(e.target.value)} className="form-control" id="exampleInputPassword1" />
      </div>

      <button type="submit " className="btn btn-primary d-flex mx-auto" style=>Submit</button>
    </form>
  </div>
)

}

Laravel API

public function store(Request $request){


  $product = new product;
   $product->category_id = $request->category_id;
   $product->product_name = $request->product_name;
   $product->product_image = $request->file('image')->store('p_imges');
     $product->product_quantity = $request->product_quantity;
     $product->product_price = $request->product_price;
   $product->product_auther = $request->product_auther;
   $product->class = $request->class;
   $product->school_name = $request->school_name;
   $product->gender = $request->gender;
   $product->F_xyz = $request->F_xyz;
   $product->size = $request->size;
   $product->xtra_info = $request->xtra_info;
    $product->doner_id = Auth::id();
    $product->save();
    $product = ["Product Successfully Added"];
    return $product;

}

Error This error occur

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/ZGQ93kj
via IFTTT