Question

当我尝试向后端上传带有reactjs和laravel的文件时，我的代码有问题，单击提交按钮服务器响应后出现500 IS错误，向前看内部代码，我得到消息调用成员函数getClientOriginalName()为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>
    )
}

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

3 个答案: