laravel 和 react 上传文件返回 500 Internal Server Error

Question

当我尝试使用reactjs 和laravel 为后端上传文件时，我的代码出现问题，单击提交按钮后服务器响应出现 500 IS 错误，期待内部代码我收到消息呼叫成员函数getClientOriginalName() on null，我猜是因为我的js 函数而出现错误，所以希望有人能帮我找出答案，我很感激

我的反应组件：

constructor(){
    super();
    this.fileInput = React.createRef();
    this.state = {
        name: '',
        avatar: '',
    }
}

handleNameChange(e){
    this.setState({
        name: e.target.value
    })
}


handleAvatarChange(e){
    this.setState({
        avatar:this.fileInput.current.files[0].name
    })
}


handleSubmit(e){
    e.preventDefault();
    axios.post('/api/add', this.state).then(response => {
        console.log(response)

    }).then(error => {
        console.log(error)
    })
}

render(){
    return (
        <div>
            <a href="/">home</a>
            {/*<Link to="/" className="btn btn-success">Return to Items</Link>*/}
            <form className="form-horizontal" onSubmit={this.handleSubmit.bind(this)}>
                <input type="text" className="form-control" id="name" value={this.state.name}  onChange={this.handleNameChange.bind(this)}/>

                <input type="file" ref={this.fileInput} onChange={this.handleAvatarChange.bind(this)} /><br></br>
                <button type="submit" className="btn btn-default">Save</button>
            </form>
        </div>
    )

}

}

我的控制器：

public function store(Request $request){
    $file_name_image = $request->file('avatar')->getClientOriginalName();
    $user = new User();

    $user->name = $request->name;
    $user ->avatar = $file_name_image;
    $request->file('avatar')->move('upload/',$file_name_image);
    $user->save();
    return response()->json('Successfully added');
}

Answer 1

我认为你的输入标签有问题。 输入没有名称属性。你应该添加它。

    <input name="file" type="text" className="form-control" id="name" value={this.state.name}  onChange={this.handleNameChange.bind(this)}/>

我建议你在你的控制器中添加 IF 语句。

    if ($request->hasFile('file')) {
       //
    }

Answer 2

我无法评论，所以我会在这里写下答案。 因此，您可以在这里找到原始问题的答案：How do I set multipart in axios with react?

如果您还想发送文件以外的其他数据，您只需像处理文件一样添加它。例如：

formData.append('name', 'Your new name')

第一个参数是你想要的 POST 数据键的名字，第二个是你想要发送的数据。它可以来自状态等。

Answer 3

对于其他可能需要的人，谢谢大家！

   constructor(props) {
    super(props);
    this.state ={
        file:null,
        name:'',
    }
    this.onFormSubmit = this.onFormSubmit.bind(this)
    this.onChange = this.onChange.bind(this)
    this.fileUpload = this.fileUpload.bind(this)
    this.handleNameChange = this.handleNameChange.bind(this)
}

onFormSubmit(e){
    e.preventDefault() // Stop form submit
    this.fileUpload(this.state.file,this.state.name).then((response)=>{
        console.log(response.data);
    })
}

onChange(e) {
    this.setState({file:e.target.files[0]})
}

handleNameChange(e){
    this.setState({
        name: e.target.value
    })
}


fileUpload(file, name){
    const url = 'http://localhost:8000/api/add';
    const formData = new FormData();
    formData.append('file',file);
    formData.append('name', name);
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    }
    return  post(url, formData,config)
}

render() {
    return (
        <form onSubmit={this.onFormSubmit}>
            <h1>File Upload</h1>
            <input type="text" value={this.state.name}  onChange={this.handleNameChange}/>
            <input type="file" onChange={this.onChange} />
            <button type="submit">Upload</button>
        </form>
    )
}