如何在 React 组件中访问 Laravel 会话数据？答案

【问题标题】：How can I access Laravel session data in a React component?如何在 React 组件中访问 Laravel 会话数据？
【发布时间】：2021-07-26 00:46:54
【问题描述】：

我是 Laravel 和 React 的新手，正在做一个测试项目，但我发现自己在访问这两个框架之间的数据方面陷入困境。

我想将在 React 组件中创建的图像元素渲染到 Laravel 刀片中。在用户通过 Laravel 刀片中的表单上传图像后，从 {{Session::get('image')}} 接收图像的来源。

如何从 React 组件状态中访问 {{Session::get('image)}}，以便我可以根据用户上传的内容使用动态 src 呈现 img 标签？无需身份验证。

更多信息：

我可以使用以下方式访问 Laravel 刀片中上传的图像：

<img src="images/{{Session::get('image')}}" class="img-fluid">

来自这个表格：

<form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">
            @csrf
                <div class="col-md-6">
                    <input type="file" id="image" name="image" class="form-control" hidden>
                    <label for="image" class="btn btn-primary">Upload Image 1</label>
                </div>
</form>

但我更愿意通过 React 组件渲染上传的图片：

import React, { Component } from "react";

class Test extends Component {
    constructor (props) {
        super(props);
        this.state = {
            img : ""
        };
    }
    render () {
        const img = this.state.img;

        return (
            <div className="img-wrapper">
                <img src={`${img}`} alt="test" className="img-fluid" />
            </div>
        );
    }
}

export default Test;

如何将 {{Session::get('image')}} 中的数据输入到上述组件的 img 状态中？

【问题讨论】：

标签： reactjs laravel

【解决方案1】：

有多种方法可以实现这一目标。一种方法是在您的 laravel 视图中呈现 JS 代码，它将图像值分配给 JS 变量。

在您的 Blade 文件中（在加载您的反应代码的脚本标签上方）：

<script>
window.image_src = "images/{{Session::get('image')}}";
</script>

在反应代码中：

const img = window.image_src;

其他选项是通过 ajax 加载图像源，或将其作为数据属性存储在 HTML 元素中。

【讨论】：

谢谢，这让我的方向正确。

【解决方案2】：

除了 levi 所说的，你可以在这里查看https://reactjs.org/docs/faq-ajax.html，了解如何获取该数据，其中你需要另一个返回图像字符串的路由

【讨论】：