时间戳

首页 > 解决方案 > 通过 http 或 guzzle 提交 Laravel Livewire 表单

laravel - 通过 http 或 guzzle 提交 Laravel Livewire 表单

问题描述

我的问题有几个组成部分。

  1. Livewire 是否有一种简单的方法来获取表单中的所有表单元素，包括图像文件上传以及将以数组形式出现的动态表单字段。

  2. 我见过很多“联系我们”的 Livewire 表单示例，但没有一个是表单提交到外部 API 的。http 等价于<form method="POST" action="apiplace.com/submit">. 但是我不想离开页面。

现在我的表单以这种方式提交：

<form wire:submit.prevent="submit" enctype="multipart/form-data">

但是，在我的提交函数中，我需要通过 POST 将表单中的所有数据发送到 API，检索响应并向最终用户显示成功或任何错误。

标签： laravelguzzlelaravel-livewire

解决方案

在您的 submit_form.blade.php 文件中：

<form wire:submit.prevent="submit">
    <input type="file" wire:model="username">
    <input type="file" wire:model="photo">
    <button type="submit">Save Form</button>
</form>

在您的 livwire 组件文件中：

class SubmitForm extends Component
{
    use WithFileUploads;

    public $photo, $username;

    public function submit()
    {
         $file               = $this->photo;
         $file_path          = $file->getPathname();
         $file_mime          = $file->getMimeType('image');
         $file_uploaded_name = $file->getClientOriginalName();

       $res = $client->request('POST', 'http://example.com/api/upload', [
    'multipart' => [
        [
             'filename' => $file_uploaded_name,
             'Mime-Type'=> $file_mime,
             'contents' => fopen($file_path, 'r'),

        ],
        [
            'name'     => 'username',
            'contents' => $this->username
        ]
     ],
    ]);
    }
}

推荐阅读