时间戳

首页 > 解决方案 > 从反应上传图像到laravel api

reactjs - 从反应上传图像到laravel api

问题描述

我无法将文件从 react 上传到 laravel api。我有一个用于上传具有标题、正文和图像的帖子的后端。如果它们是图像，则应保存图像的 url，如果不保存默认值。我用邮递员进行了测试，它工作正常，但是当我尝试从我的反应前端上传时，它会为每次试验保存 noimage。

Laravel 接口

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))
            })        
    }
}

`

标签： reactjslaravel

解决方案

您需要发送请求，multipart/form-data就像您需要在发布请求中包含文件一样：

const config ={
    headers:{
        'Authorization':`Bearer ${token}`,
         'Content-Type': 'multipart/form-data'
     }, 
}

如果您想了解有关该主题的更多信息，我建议您阅读以下内容：application/x-www-form-urlencoded 或 multipart/form-data?

此外，您必须将每个字段附加为 formData，您不能创建带有 formdata 的 javascript 对象

代替：

const fd = new FormData();
fd.append('image',postImg)
const data = {
   title:title,
   body:body,
   image:fd
}
                
props.onCreatePost(data);

做：

const fd = new FormData();
fd.append('image',postImg)
fd.append('title', title)
fd.append('body', body)             
props.onCreatePost(fd);

推荐阅读