React에서 Laravel API로 이미지 업로드

laravel API에 대한 반응에서 파일을 업로드하는 데 문제가 있습니다. 제목, 본문 및 이미지가있는 게시물을 업로드하기위한 백엔드가 있습니다. 이미지 인 경우 이미지의 URL을 저장하고 기본값을 저장하지 않으면 저장해야합니다. 나는 우편 배달부로 테스트했으며 올바르게 작동했지만 반응 프런트 엔드에서 업로드하려고 할 때 모든 시험에 대해 이미지가 저장되지 않습니다.

라 라벨 API

public function save(Request $request)
    {
        $validator = Validator::make($request->all(),[
            'title'=>'required',
            'body'=>'required',
            'user_id'=>'required'
        ]);
        $post = new Post();
            $post->title = $request->title;
            $post->body= $request->body;
            $post->user_id= auth()->user()->id;
            if($request->hasFile('image')){
                $fileNameWithExt = $request->file('image')->getClientOriginalName();
                $fileName = pathinfo($fileNameWithExt,PATHINFO_FILENAME);
                $fileExt = $request->file('image')->getClientOriginalExtension();
                $fileNameToStore = $fileName.'_'. time() .'.'.$fileExt;
                $path = $request->file('image')->storeAs('public/images',$fileNameToStore);
            }else{
                $fileNameToStore = "NoImage.jpg";
            }
            $post->image =$fileNameToStore;
            $post->save();

        return new PostResource($post);
    }

반응 코드

    const [imgName,setImgName] = useState('Choose Image');
        const [postImg,setPostImg] = useState()
        const [postData,setPostData] = useState({
            title:'',
            body:''
        });
    
        const {title,body} = postData;
    
        const changeHandler = e =>{  
           setPostData({...postData,[e.target.name]:e.target.value});
        }
    
        const fileHandler = e=>{
            setImgName(e.target.files[0].name);
            setPostImg(e.target.files[0]);
            
        }
    
        const submitHandler = e =>{
            e.preventDefault();
            
            if(!title || !body){
                props.setMsg("You can't leave title or body field blank",'warning');
                setTimeout(()=>{
                    props.clearError()
                },3000)
            }else{
                const fd = new FormData();
                fd.append('image',postImg)
                const data = {
                    title:title,
                    body:body,
                    image:fd
                }
                
                props.onCreatePost(data);
                console.log(fd.get('image'));
                
            }
           
        }

나는 반응과 함께 redux를 사용하고 있습니다.

`

export const createPost = (formData)=>{
    return (dispatch) =>{
        const token = localStorage.getItem('token')
        const config ={
            headers:{
                'Authorization':`Bearer ${token}`,
                
            }, 
        }
        console.log('Sent Data: ',formData);
           axios.post(`http://127.0.0.1:8000/api/posts`,formData,config)
            .then(res=>{
                dispatch(addPost(res.data))
            }).catch(err=>{
                dispatch(postfailed(err.response))
            })        
    }
}

`