使用 Laravel 8 Livewire 组件更新图像

Question

我想用 Livewire 更新我的 Laravel 8 项目中的 Image，并且我使用 Bootstarp 作为 css 框架。我想使用类型提示进行文件编辑，但从数据库中检索后无法在刀片组件模式中预览。我从数据库中检索了所有数据，并在检查时在网络选项卡上进行了检查，我已经显示了标题和说明，但无法显示图像。

这是我的刀片组件代码...

<div wire:ignore.self class="modal inmodal in" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated bounceInRight">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Service Edit Form</h4>
                <button type="button" class="close" data-dismiss="modal" style="position: absolute; top: 0; right: 0; margin: 10px 10px 0 0;">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>NB: <small>Please fill the field with (<span style="color: red;">*</span>) symbol.</small></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <form wire:submit.prevent="update()" method="post" class="form-horizontal" enctype="multipart/form-data">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="title">
                                            Service Title <span style="color: red;">*</span>
                                        </label>
                                        <div class="col-sm-10">
                                            <input type="text" id="title" class="form-control" name="title" placeholder="Service Title" wire:model.lazy="editing.title">
                                            @error('title') <small style="color: red;">{{ $message }}</small> @enderror
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="description">
                                            Description <span style="color: red;">*</span>
                                        </label>
                                        <div class="col-sm-10" wire:ignore>
                                            <textarea id="edit-description" name="description" wire:model.lazy="editing.description">{{ $description }}</textarea>
                                        </div>
                                        <div class="col-sm-10 col-sm-offset-2">
                                            @error('description') <small style="color: red;">{{ $message }}</small> @enderror
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="logo_img_path">
                                            Icon Image <span style="color: red;">*</span>
                                        </label>
                                        <div class="col-sm-10">
                                            <input type="file" id="logo_img_path" name="logo_img_path" wire:model="editing.logo_img_path"/>
                                            @error('logo_img_path') <small style="color: red;">{{ $message }}</small> @enderror
                                            <br>
                                            @if($logo_img_path)
                                                <img src="{{ asset('storage/app/services'.$logo_img_path) }}" />
                                            @else
                                                <img class="img-lg img-rounded" src="{{ $this->logoImageUrl() }}" alt="Service Logo Image">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="bg_img_path">
                                            Background Image <span style="color: red;">*</span>
                                        </label>
                                        <div class="col-sm-10">
                                            <input type="file" id="bg_img_path" name="bg_img_path" wire:model="editing.bg_img_path"/>
                                            @error('bg_img_path') <small style="color: red;">{{ $message }}</small> @enderror
                                            <br>
                                            @if($bg_img_path)
                                                <img src="{{ asset('storage/app/services'.$bg_img_path) }}" />
                                            @else
                                                <img class="img-lg img-rounded" src="{{ $this->bgImageUrl() }}" alt="Service Logo Image">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <div class="col-sm-4 col-sm-offset-2">
                                            <button class="btn btn-primary btn-xs" type="submit">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的编辑和更新代码：

namespace App\Http\Livewire\Admin;

use Illuminate\Support\Facades\Storage;
use App\Models\User;
use App\Models\Service;
use Livewire\WithFileUploads;
use Livewire\Component;
use Auth;

class ServiceComponent extends Component
{
    use WithFileUploads;

    // public $isOpen = false;

    public $title;
    public $description;
    public $logo_img_path;
    public $bg_img_path;

    public Service $editing;

    protected $rules = [
        'editing.title' => 'required|unique:services,title',
        'editing.description' => 'required',
        'editing.logo_img_path' => 'required|image|mimes:jpeg,png,svg,jpg,gif',
        'editing.bg_img_path' => 'image|mimes:jpeg,png,svg,jpg,gif',
    ];

    public function resetInputFields()
    {
        $this->title = "";
        $this->description = "";
        $this->logo_img_path = "";
        $this->bg_img_path = "";
    }

    public function mount()
    {

    }

    public function render()
    {
        return view('livewire.admin.service-component',['services'=>Service::orderBy('id', 'desc')->get()])->layout('admin.adminbase');
    }

    // public function create()
    // {
    //     $this->resetInputFields();
    //     $this->openModal();
    // }

    // public function openModal()
    // {
    //     $this->isOpen = true;
    //     // Clean errors if were visible before
    //     $this->resetErrorBag();
    //     $this->resetValidation();
    // }

    // public function closeModal()
    // {
    //     $this->isOpen = false;
    // }

    public function updatedTitle()
    {
        $this->validate(['title' => 'unique:services,title']);
    }

    public function store()
    {
        $validatedData = $this->validate([
            'title' => 'required|unique:services,title',
            'description' => 'required',
            'logo_img_path' => 'required|image|mimes:jpeg,png,svg,jpg,gif',
            'bg_img_path' => 'image|mimes:jpeg,png,svg,jpg,gif',
        ]);

        $validatedData['logo_img_path'] = $this->logo_img_path->store("/",'services');
        $validatedData['bg_img_path'] = $this->bg_img_path->store("/",'services');
        $validatedData['created_by'] = Auth::user()->id;
        $validatedData['updated_by'] = Auth::user()->id;

        $company = Service::create($validatedData);
        // session()->flash('message', 'Service created successfully!');

        $this->resetInputFields();
        $this->emit('storedData');
    }

    public function edit(Service $services)
    {
        //dd($services);
        $this->editing = $services;
        $this->emit('initSummernote', $this->editing->description);
        // $company = Company::findOrFail($id);
        // $this->company_id = $id;
        // $this->title = $company->title;
        // $this->openModal();
    }

    public function update()
    {
        $this->validate();
        // $this->emit('resetSummernote');
        dd($this->editing);
    }

    public function delete($id)
    {
        $this->company_id = $id;
        Company::find($id)->delete();
        session()->flash('message', 'Company deleted successfully.');
    }

    public function logoImageUrl()
    {
        return $this->logo_img_path
            ? Storage::disk('services')->url($this->logo_img_path)
            : 'https://www.gravatar.com/avatar/'.md5(strtolower(trim($this->title)));
    }

    public function bgImageUrl()
    {
        return $this->bg_img_path
            ? Storage::disk('services')->url($this->bg_img_path)
            : 'https://www.gravatar.com/avatar/'.md5(strtolower(trim($this->title)));
    }
}

Answer 1

如果您仍在寻找解决方案，请前往：

Livewire 组件添加：

    use WithFileUploads;
    public $image = '';

    public function submit(){
        $this->validate([
            'image' => 'required|max:1024', //1MB
        ]);

        // Execution doesn't reach here if validation fails.
       
        DB::transaction(function () {
          $ImageName = md5($this->image . 
          microtime()).'.'.$this->image->extension();
          $this->image->storeAs('public/images', $ImageName);
        });
    }

现在在刀片视图中添加图像的预览，该预览在开始上传后立即显示（请记住，这是 livewire 使用的 tmp 路径+名称）：

@if ($image)
<div class="space-y-1 text-center">
                    <div class="flex text-sm text-gray-600">
                        <img src="{{ $image->temporaryUrl() }}" class="h-64">
                    </div>
                </div>
@else
.... ur file upload form
@endif

现在渲染你保存的图像，使用以下作为img路径（记得启用存储链接，检查它here）：

asset('storage/images/' . $model_name->image)