Livewire 文件上传首次验证失败的排查与解决

<?php

namespace App\Http\Livewire\Branch\Documents;

use App\Models\BranchDocument;
use Livewire\Component;
use Livewire\WithFileUploads;

class Upload extends Component
{
    use WithFileUploads;

    public BranchDocument $document;
    public $file; // 用于存储上传的文件
    public $saved = false;

    public function render()
    {
        return view('livewire.branch.documents.upload');
    }

    public function save()
    {
        // 在此处进行验证
        $this->validate([
            'file' => 'mimes:jpg,bmp,png,pdf|max:10240', // 10MB Max
        ]);

        // 假设验证通过，处理文件
        // $this->document->file = $this->file->store('documents'); // 实际存储操作
        $this->document->file = $this->file; // 简化处理
        $this->saved = true;
    }
}

<div x-data="{ open: false }">
    <!-- ... 其他 UI 元素 ... -->

    <div x-show="open" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <!-- ... 模态框背景和居中元素 ... -->

            <div @click.away="open = false" class="inline-block align-bottom bg-white rounded-lg px-4 py-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                <form wire:submit.prevent="save">
                    <input type="file" wire:model="file" class="file-input-business block mx-auto mt-4"/>
                    @error('file') <span class="error">{{ $message }}</span> @enderror

                    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
                        <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-porange text-base font-medium text-white hover:bg-porange-darker focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-porange sm:col-start-2 sm:text-sm">
                            {{ __('Send')}}
                        </button>
                        <button @click="open = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-porange sm:mt-0 sm:col-start-1 sm:text-sm">
                            {{ __('Cancel')}}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<form wire:submit.prevent="save">
    <input type="file" wire:model="file" class="file-input-business block mx-auto mt-4"/>
    @error('file') <span class="error">{{ $message }}</span> @enderror

    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
        <button
            type="submit"
            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-porange text-base font-medium text-white hover:bg-porange-darker focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-porange sm:col-start-2 sm:text-sm"
            wire:loading.attr="disabled" {{-- 在加载时禁用按钮 --}}
            wire:target="file" {{-- 针对文件上传的加载状态 --}}
        >
            <span wire:loading.remove wire:target="file">{{ __('Send')}}</span> {{-- 默认文本 --}}
            <span wire:loading wire:target="file">{{ __('Uploading...')}}</span> {{-- 上传中提示 --}}
        </button>
        <button @click="open = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-porange sm:mt-0 sm:col-start-1 sm:text-sm">
            {{ __('Cancel')}}
        </button>
    </div>
</form>

public function save()
{
    // 调试：检查文件属性的状态
    // 如果是 null，说明文件尚未完全上传或未正确绑定
    if (is_null($this->file)) {
        \Log::warning('File property is null during first validation attempt.');
        // 可以选择返回一个错误信息，或者等待
        // return $this->addError('file', 'Please wait for the file to upload.');
    } else {
        \Log::info('File property is present. Filename: ' . $this->file->getClientOriginalName());
    }

    $this->validate([
        'file' => 'mimes:jpg,bmp,png,pdf|max:10240', // 10MB Max
    ]);

    // ... 后续处理
}