使用 React JS 和 Laravel 处理多个图像上传

2024-04-18

我想通过reactjs中的axios将多个图像上传到数据库,将数据从客户端发送到服务器端,并在服务器端使用laravel处理图像上传。我的问题是,每当我尝试在服务器端处理多个图像时,它都不起作用。

这是我的代码。

客户端 (ReactJS)

建设者:

constructor(props){
        super(props);
        this.state = {
            id: "upload-photo",
            imageArray: [],
            body: '',
            posts: [],
            // image: []
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleBodyChange = this.handleBodyChange.bind(this);
    }

汉勒文件更改:

handleFileChange(e){
        if (e.target.files) {
            const files = Array.from(e.target.files);

            const promises = files.map(file => {
                return (new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.addEventListener('load', (ev) => {
                        resolve(ev.target.result);
                    });
                    reader.addEventListener('error', reject);
                    reader.readAsDataURL(file);
                }))
            });

            Promise.all(promises).then(images => {
                this.setState({
                    imageArray: images
                })
            }, error => { console.error(error); });
        }
        if (this.props.onChange !== undefined) {
            this.props.onChange(e);
        }
    }

处理提交更改:

handleSubmit(e) {
        e.preventDefault();
        // this.postData();
        const formData = new FormData();
        this.state.imageArray.forEach((image_file) => {
             formData.append('file[]', image_file);
        });
        formData.append('body', this.state.body);
        for (let pair of formData.entries()) {
            console.log(pair[0]+ ', ' + pair[1]);
        }
        axios.post('/posts', formData)
            .then(response => {
            this.setState({
                posts: [response.data]
            })
        });
        this.setState({
            body: ''
        });
    }

服务器端(Laravel)

public function create(Request $request, Post $post) {
        $data = [];
        if ($request->get('file')) {
            foreach ($request->get('file') as $file) {
                $name = time() . '.' . explode('/', explode(':', substr($file, 0, strpos($file, ';')))[1])[1];
                \Image::make($file)->save(public_path('images/') . $name);
                array_push($data, $name);
            }
        }
        $image = json_encode($data);
        // create post
        $createdPost = $request->user()->posts()->create([
            'body' => $request->body,
            'image' => $image
        ]);
        // return the response
        return response()->json($post->with('user')->find($createdPost->id));
    }

我希望所有上传的图像都保存到数据库中。相反,它会抛出一个错误:Invalid argument supplied for foreach()。因此,如果我删除 foreach() 循环并仅上传一张图像,它将成功保存图像。如何利用循环保存多张图像?

UPDATE
@DelenaMalan 在下面的评论中回答了这个问题。我更新了这个问题中的代码,以便其他搜索与此问题相关的答案的人可以使用该代码来解决他们的问题。


在你的前端你可以使用formData.append('file[]', image_file)将您的图像文件添加到file表单数据中的数组,例如:

this.state.imageArray.forEach((image_file) => {
    formData.append('file[]', image_file);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 React JS 和 Laravel 处理多个图像上传 的相关文章

随机推荐

  • tls:收到长度为 XXXXX 的超大记录

    我使用内置的标准 SSL 套接字客户端库 net crypto tls 如下所示 conn err net Dial tcp exploit im 5222 config tls Config InsecureSkipVerify true
  • 如何避免跨页面拆分 HTML 表格

    请原谅我的英语 我正在打印一份 pdf 格式的大型报告 其中包括一些表格 一个又一个的表格 为此 我首先生成 html 格式的报告 然后使用dompdf http pxd me dompdf www 这是我打印一张又一张表格的方式 div
  • 对对象的引用并不更新该对象

    您好 我正在使用看起来像这样的代码 class A Custom objA public A Assign some value to objA B obj new B objA class B Custom objB public B C
  • UITableViewCell 选定行的文本颜色变化

    我有一个表格视图 我想知道如何更改所选行的文本颜色 例如 Red 我尝试通过这段代码 UITableViewCell tableView UITableView tableView cellForRowAtIndexPath NSIndex
  • 如何在 Visual Studio 2015 中创建新分支?

    我在 Visual Studio 2015 中将 Git 与 Visual Studio Online 结合使用 并试图弄清楚如何创建分支 这是网上常见的答案 https msdn microsoft com en us library h
  • 由于地理位置邻近公式(商店定位器)而导致结果缺失

    好的 我已经断断续续地与这个问题斗争了大约 3 个月 因为我已经用尽了我遇到的所有地理邻近公式 但我距离获得正确的结果还差得很远 我认为是时候了寻求帮助 THE AIM 我正在设置一个相当基本的商店定位器实现 用户输入邮政编码并从预定义的搜
  • Vue.use() 抛出“无法读取未定义的属性‘use’”

    尝试1 main js import createApp from vue import store from store store import App from App vue Vue config productionTip fal
  • 对列表进行排序,使特定值位于顶部

    我有课Offer其中包含一个已归档的类别 我希望特定类别的所有优惠都显示在顶部 然后是其他所有优惠 我试过了 但没有效果 你有什么推荐的吗 Offers Offers OrderBy x gt x Category Corporate To
  • 迭代多级提升树

    我的树看起来像这样 Library L ID 1 Book B ID 1 Title Moby Dick Book B ID 2 Title Jurassic Park Library L ID 2 Book B ID 1 Title Ve
  • Android 为 FLAG_TRANSLUCENT 禁用 ActionBar 和 NavigationBar 的叠加

    如图所示 导航栏和状态栏重叠布局 我所做的只是 if Build VERSION SDK INT gt Build VERSION CODES KITKAT Window w getWindow w setFlags WindowManag
  • 结合 EditText 和 Button?

    在某些应用程序中 我看到 EditText 小部件与右侧的按钮结合在一起 例如Twitter 应用程序中的搜索字段 http 2 bp blogspot com GTM W5mVPTU S rmYdiUTCI AAAAAAAAAEE hIO
  • 使用 alembic 自动生成时忽略模型

    我正在尝试使用自动生成数据库的修订版本alembic 这样做时 我想忽略一些模型 它们具有当前版本的 MySQL 不支持的数据类型 这是我尝试过的方法 似乎工作正常 但我不确定这是最惯用的方法 inside alembic env py d
  • Eclipse RCP - 创建视图后立即添加侦听器

    问候 Stackoverflow 的同胞们 我正在开发 Eclipse RCP 应用程序 并且必须添加SelectionListener to the Project Explorer view创建后的那一刻 我意识到我无法在我的贡献插件的
  • Android:活动对话框/对话框意外消失

    我有一个申请TabActivity每次从引擎 NDK C 代码 收到回调时 我都会在其中显示一个对话框 我确保当应用程序处于恢复状态时显示对话框 收到引擎的回调后 我启动NetworkDownDialog活动 但这会导致对话框停留一秒钟然后
  • 如何将 NHibernate 与 System.Tuple 等不可变类型一起使用?

    我有一个复合映射使用System Tuple
  • 为什么LogCat充满了错误?

    我尝试让 Android 应用程序消除任何错误 我绝对确定 这些都不是我的错误 当然 可能会有不同的系统信息消息 但我将日志级别设置为 警告 之后我仍然看到很多字符串 它们同时填充日志窗口 举个例子 01 21 20 47 13 336 4
  • Ruby 中什么计算结果为 false?

    false and nil评估为false in Ruby 还要别的吗 请提供官方 权威参考文献的链接 2 0 0p247 001 gt if true puts TRUE else puts FALSE end TRUE 2 0 0p24
  • 如何实现xxx.domainname.com URL模式?

    考虑 blogspot com 的情况 域名只是一个 blogspot com 但假设我用 xxx 注册 那么我将拥有 xxx blogspot com 这里它不会是子域名 我可以闻到 但是它有些不同 如何实现这一点 在 j2ee Web
  • 如何比较 Python 中的版本号?

    我正在遍历一个包含鸡蛋的目录 将这些鸡蛋添加到sys path 如果目录中有同一个 egg 的两个版本 我只想添加最新的一个 我有一个正则表达式r P
  • 使用 React JS 和 Laravel 处理多个图像上传

    我想通过reactjs中的axios将多个图像上传到数据库 将数据从客户端发送到服务器端 并在服务器端使用laravel处理图像上传 我的问题是 每当我尝试在服务器端处理多个图像时 它都不起作用 这是我的代码 客户端 ReactJS 建设者