Livewire 文件上传验证首次失败：深入解析与解决方案

<?php

namespace App\Http\Livewire\Branch\Documents;

use App\Models\BranchDocument;
use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Http\UploadedFile; // 导入 UploadedFile 类

class Upload extends Component
{
    use WithFileUploads;

    public BranchDocument $document;
    public ?UploadedFile $file = null; // 明确类型提示并初始化为 null
    public $saved = false;

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

    public function save() {
        // 在验证前检查 $this->file 的状态
        \Log::info('File property before validation:', ['file' => $this->file]);
        // 或者使用 dd() 进行中断式调试
        // dd($this->file);

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

        // 如果验证通过，文件将是一个 UploadedFile 实例
        if ($this->file) {
            // 示例：将文件存储到指定目录
            // $this->file->store('documents');
            // $this->document->file_path = $this->file->hashName('documents'); // 保存文件路径到数据库
            // ...
        }

        $this->document->file = $this->file; // 这行代码可能需要根据实际文件存储逻辑调整

        $this->saved = true;
    }
}

<div x-data="{ open: false }">
    <!-- ... 其他内容 ... -->

    @if(!$saved)
    <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">
            <!-- ... modal overlay ... -->
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <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">
                <!-- ... modal header ... -->
                <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 wire:loading wire:target="file" class="text-sm text-gray-500 mt-2">
                        文件正在上传中...
                    </div>
                    <div wire:loading wire:target="save" class="text-sm text-blue-500 mt-2">
                        正在提交...
                    </div>

                    <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, save">
                            {{ __('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>
    @endif
</div>

// 在 Livewire 组件中
public function updatedFile()
{
    // 当 $this->file 属性被更新时（即文件上传完成并绑定到属性后）
    // 你可以在这里执行一些初步的检查或日志记录
    \Log::info('File property updated:', ['file' => $this->file]);
    // 甚至可以在这里进行预验证，如果需要
    $this->validateOnly('file', [
        'file' => 'mimes:jpg,bmp,png,pdf|max:10240',
    ]);
}