如何使用 Livewire (Laravel) 上传 pdf 文件？

Question

这是我当前的代码：

这是我当前的电线：型号为 spk：

<?php

namespace App\Http\Livewire\Spk;

use App\Models\Spk;
use Illuminate\Support\Facades\Storage;
use Livewire\Component;
use Livewire\WithFileUploads;

class Form extends Component
{
    use WithFileUploads;

    public $spk;

    public $submitButtonName;

    protected $rules = [
        'spk.file_path' => 'required|mimes:pdf,xlsx,xls,csv,txt,png,gif,jpg,jpeg|max:8192',
    ];


    public function mount() {
        // Check if the spk property is set
        if (!$this->spk){
            $this->spk = new Spk();

            $this->submitButtonName = 'Create';
        } else {
            $this->submitButtonName = 'Edit';
        }
    }

    public function save()
    {
        $this->validate();

        // Handle file upload
        if ($this->spk->file_path) {
            // Generate a unique filename with microtime
            $filename = 'spk' . microtime(true) . '.' . $this->spk->file_path->getClientOriginalExtension();

            // Save the file to the storage directory
            $this->spk->file_path->storeAs('spk', $filename, 'public');

            // Update the file_path attribute with the new filename
            $this->spk->file_path = $filename;
        }

        $this->spk->save();
        session()->flash('message', 'SPK Saved!');
        return redirect()->route('spks.index');
    }

    public function render()
    {
        return view('livewire.spk.form');
    }
}

这是我当前的钢丝刀片视图：

<form wire:submit.prevent="save" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="px-4 py-2">
            <x-label for="file_path" value="{{ __('File Path') }}" />
            <x-input wire:model="spk.file_path" type="file" name="file_path" :value="old('file_path')" class="w-full"
                required autofocus />
            @error('spk.file_path')
                <div>{{ $message }}</div>
            @enderror
        </div>

        <div class="px-4 pt-8 pb-4">
            <button type="submit"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md w-full">
                {{ __($submitButtonName) }}
            </button>
        </div>
    </div>
</form>

我已经这样做了

php artisan storage:link

我很困惑我的代码出了什么问题。 file_path 无法保存在数据库中。

我尝试做

dd($this->spk->file_path);

，这是结果。它显示“磁盘”=>“本地”

请帮我解决使用 livewire 上传文件的问题。谢谢！

Answer 1

我做了一些小的修改，现在它在类自己的属性上上传文件，而不是使用模型绑定到模型的属性。绑定到模型属性可能会对水合/重新水合属性产生问题 - 一般来说，不使用模型绑定被认为是更好的做法（在 Livewire v3 中，默认情况下禁用它）。

另一个值得注意的更改是将

required

规则替换为

nulllable

- 这可能会或不正确更改（您需要自己确定），但由于您对

if ($this->spk->file_path) {

进行了明确检查，我认为它可以在不更改文件的情况下提交表格。

<?php

namespace App\Http\Livewire\Spk;

use App\Models\Spk;
use Illuminate\Support\Facades\Storage;
use Livewire\Component;
use Livewire\WithFileUploads;

class Form extends Component
{
    use WithFileUploads;

    public $spk;
    public $spkFile;

    public $submitButtonName;

    protected $rules = [
        'spkFile' => 'nullable|mimes:pdf,xlsx,xls,csv,txt,png,gif,jpg,jpeg|max:8192',
    ];


    public function mount() {
        // Check if the spk property is set
        if (!$this->spk){
            $this->spk = new Spk();

            $this->submitButtonName = 'Create';
        } else {
            $this->submitButtonName = 'Edit';
        }
    }

    public function save()
    {
        $this->validate();

        // Handle file upload
        if ($this->spkFile) {
            // Generate a unique filename with microtime
            $filename = 'spk' . microtime(true) . '.' . $this->spkFile->getClientOriginalExtension();

            // Save the file to the storage directory
            $this->spkFile->storeAs('spk', $filename, 'public');

            // Update the file_path attribute with the new filename
            $this->spk->file_path = $filename;
            $this->spkFile = null;
        }

        $this->spk->save();
        session()->flash('message', 'SPK Saved!');
        return redirect()->route('spks.index');
    }

    public function render()
    {
        return view('livewire.spk.form');
    }
}

<form wire:submit.prevent="save" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="px-4 py-2">
            <x-label for="file_path" value="{{ __('File Path') }}" />
            <x-input wire:model="spkFile" type="file" name="file_path" :value="old('file_path')" class="w-full"
                required autofocus />
            @error('spkFile')
                <div>{{ $message }}</div>
            @enderror
        </div>

        <div class="px-4 pt-8 pb-4">
            <button type="submit"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md w-full">
                {{ __($submitButtonName) }}
            </button>
        </div>
    </div>
</form>