为什么 laravel livewire 图片上传会出现这种奇怪的行为

Question

Laravel 版本：8.x

livewire 版本：2.x

我正在制作出勤管理系统项目的学生注册表格。

下面是图片：

现在，当我填写所有字段并 select 要上传的照片时，所有其他输入字段都会变为空白

表单的代码是这样的：

<div class="create-student display-flex flex-direction-column flex-align-items-center flex-justify-content-flex-start">
    @livewire('header',['name' => 'Student Registeration Page','width'=> '70%','height' => '20%'])
    <form style="margin-top: 2%; padding-top: 1%" class="student-form display-grid " wire:submit.prevent="signUpUser" enctype="multipart/form-data">
        <section class="name display-grid" >
            <div class="display-flex flex-direction-column flex-justify-content-center">
                <label for="FirstName">First Name <span style="color: red">*</span> :</label>
                <input wire:model.defer = "form.first_name" type="text" name="FirstName">
            </div>
            <div class="display-flex flex-direction-column flex-justify-content-center ">
                <label for="FirstName">Mid Name :</label>
                <input wire:model.defer = "form.mid_name" type="text" name="FirstName">
            </div>
            <div class="display-flex flex-direction-column flex-justify-content-center ">

                <label for="LastName">Last Name <span style="color: red">*</span> :</label>
                <input wire:model.defer="form.last_name" type="text" id="LastName" >
            </div>
        </section>
        <section class="father-email display-grid ">
            <div  class="display-flex flex-direction-column flex-justify-content-center">
                <div>
                    <label for="FatherName">Email <span style="color: red">*</span> :</label>
                    <input wire:model.defer="form.email" type="Email" name="FatherName">
                </div>
            </div>
            <div  class="display-flex flex-direction-column flex-justify-content-center">
                <div>
                    <label for="FatherName">Father Name <span style="color: red">*</span> :</label>
                    <input wire:model.defer="form.father_name" type="text" name="FatherName">
                </div>
            </div>

        </section>
        <section  class="roll-class display-grid flex-align-items-center ">
            <div class="display-flex flex-direction-column flex-justify-content-flex-end">
                <label for="RollNumber">Roll # <span style="color: red">*</span> :</label>
                <input wire:model.defer="form.roll_number" type="number" name="RollNumber">
            </div>
            <div class="display-flex flex-direction-column flex-justify-content-flex-end">
                <label for="Class">Class <span style="color: red">*</span> :</label>
                <input wire:model.defer="form.class" type="number" name="Class">
            </div>
        </section>
        <section class="gender-profile display-grid flex-align-items-center">
            <div class="display-flex flex-direction-column flex-justify-content-flex-end">
                <label for="gender">Choose your gender <span style="color: red">*</span> :</label>
                <div class="">
                    <label style="display: inline;" for="male">male</label>
                    <input wire:model.defer="form.gender" style="" name="gender" type="radio" value="M">
                    <label style="display: inline" for="female">female</label>
                    <input wire:model.defer="form.gender" name="gender" type="radio" value="F">
                </div>
            </div>
            <div class="display-flex flex-direction-column ">
                <label for="photo">Profile Photo <span style="color: red">*</span> : </label>
                <input wire:model.defer="form.photo" type="file" name="photo">
            </div>
        </section>

        <section class="password display-grid flex-align-items-center">
            <div style="width: 100%;height: 100%" class="display-flex flex-direction-row flex-align-items-center flex-justify-content-space-between">
            <div style="width: 50%; height: 100%" class="display-flex flex-direction-column ">
                <label for="password">Password <span style="color: red">*</span> : </label>
                <input  wire:model.defer.prevent="form.password"   type="password" name="password" required>
            </div>
            <button  type="submit" style="width: 40%;height: 100%; background-color: black;color: white">Register Student</button>
            </div>
        </section>

    </form>
</div>

组件的 php class :

<?php
namespace App\Http\Livewire\Student;
use Livewire\Component;
use Livewire\WithFileUploads;

class Signup extends Component
{
    use WithFileUploads;

    public $form = [];

    public function hydrate(){
        $this->form['first_name']=null;
        $this->form['last_name']=null;
        $this->form['mid_name']=null;
        $this->form['email']=null;
        $this->form['password']= null;
        $this->form['father_name']=null;
        $this->form['class']=null;
        $this->form['roll_number']=null;
        $this->form['gender']=null;
        $this->form['photo']=null;
    }

    public function render()
    {
        return view('livewire.student.signup')
            ->extends('layouts.app')
            ->section('content')
            ;
    }

    public function signUpUser(){
        dd($this->form);
    }
}

如果您需要任何其他详细信息或其他信息，请告诉我！！谢谢！

Answer 1

您的 hydrate() 方法为每个请求获取运行。由于您使用的是 model:wire.defer，none 的请求会立即发送到服务器，它们会排队等候下一个被触发的请求（这显然发生在上传照片时）。

来自 Livewire v2 文档，

hydrate(): Runs on every request, after the component is hydrated, but before an action is performed, or render() is called

mount(): Runs once, immediately after the component is instantiated, but before render() is called

只需将 hydrate() 替换为 mount() - 在组件首次呈现之前只有运行s - 应该会处理它。

public function mount() {
    $this->form['first_name'] = null;
    $this->form['last_name'] = null;
    $this->form['mid_name'] = null;
    $this->form['email'] = null;
    $this->form['password']= null;
    $this->form['father_name'] = null;
    $this->form['class'] = null;
    $this->form['roll_number'] = null;
    $this->form['gender'] = null;
    $this->form['photo'] = null;
}

Livewire lifecycle hooks

为什么 laravel livewire 图片上传会出现这种奇怪的行为

Why this strange behaviour with laravel livewire image upload

php

laravel

laravel-livewire