Question

这是我第一次在reactjs中创建上传文件，我的服务器是laravel。我在上传文件时遇到问题。

我尝试使用控制台检测上载文件时是否发生了更改。是的，该文件可能显示在我的控制台中。

但是，在我的服务器上，我使用的是laravel的hasFile，它表示。 未找到文件。

为什么找不到文件服务器检测到
为什么状态为确定
最后在我的控制台中发现我上传了文件，但是在服务器中检测到未找到文件。

我的控制器

public function save_home_content(Request $request)
{

    if($request->hasFile('image'))
    {
        echo 'Have File';
    }
    else
    {
        echo 'No File';
    }


}

我的输入

<div className="col-md-6" id="file-content">
    <div className="form-group">
        <label htmlFor="exampleFormControlFile1">Image</label>
        <input type="file" 
        name="image"
        onChange={this.handleChangeImage}
        className="form-control-file" 
        accept="image/x-png,image/gif,image/jpeg" 
        id="exampleFormControlFile1"/>
    </div>
</div>

我的手

    handleChangeImage(e){
    this.setState({
        image:e.target.files[0]
    })

    console.log(e.target.files);
}

Axios

        axios.post('/api/save_home_content', this.state.image).then(response => {
        console.log(response);
    }).catch(error => (error.response));

关于..

Answer 1

对于使用react js和laravel上传图像，您必须首先将此encType="multipart/form-data"添加到<Form>组件中，然后在axios请求中这样做并添加重要的内容headers: { 'Content-Type': 'multipart/form-data', },

这是使用laravel上传图像并响应js的结果代码

    var formData = new FormData();
    formData.append('image', this.state.image);
    formData.append('name', this.state.name);
    formData.append('family', this.state.family);
    formData.append('body', this.state.body);
    formData.append('email', this.state.email);
    formData.append('phone', this.state.phone);
    formData.append('subject', this.state.subject);

    axios.post('http://localhost:8000/api/contact_us',
        formData,
        {
            headers: {
                'Content-Type': 'multipart/form-data',
            },

        }
        )}

解决问题的关键是添加标头：{ 'Content-Type'：'multipart / form-data'， }，到您的axios请求希望为您工作：）

使用ReactJS和Laravel将请求发送到服务器（文件）

1 个答案: