Javascript laravel和react上载文件返回500内部服务器错误

我的代码有问题，当我尝试上载一个文件，其中包含

reactjs

和

laravel

作为后端时，在单击submit按钮后，服务器响应500是错误的，期待代码内部我收到对成员函数的消息调用

getClientOriginalName（）

，为空，我猜出现错误是因为我的

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

}

}

---

我认为问题出在你的输入标签上。 输入没有name属性。你应该加上它

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

---

我不能评论，所以我会把答案写在这里。 因此，您可以在此处找到原始问题的答案：

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

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

---

第一个参数是POST数据键的名称，第二个参数是要发送的数据。它可以来自州等地。

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

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

构造函数（道具）{
超级（道具）；
这个州={
文件：null，
名称：“”，
}
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（）//停止表单提交
this.fileUpload（this.state.file，this.state.name）。然后（（响应）=>{
console.log（response.data）；
})
}
onChange（e）{
this.setState（{file:e.target.files[0]}）
}
手形变化（e）{
这是我的国家({
名称：e.target.value
})
}
文件上载（文件、名称）{
常量url=http://localhost:8000/api/add';
const formData=new formData（）；
formData.append（'file'，file）；
formData.append（'name'，name）；
常量配置={
标题：{
“内容类型”：“多部分/表单数据”
}
}
返回帖子（url、formData、配置）
}
render（）{
返回(
文件上传
上传
)
}

可能重复您需要发送表单数据并添加标题您可以给我一些代码吗，我是react的新手，这对我来说非常复杂您可以在这里找到答案：@Gary谢谢！它的工作，但只插入到数据库中的文件，现在我想添加更多的描述或名称等？我该怎么做？谢谢！它正在工作，我把我的答案放在休息室里。如果你觉得有用，请别忘了接受它

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

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