使用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 AppHttpLivewireAdmin;
use IlluminateSupportFacadesStorage;
use AppModelsUser;
use AppModelsService;
use LivewireWithFileUploads;
use LivewireComponent;
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);
});
}

现在，在blade视图中添加图像的预览，该预览在开始上传后立即显示(请记住，这是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

现在要渲染u保存的图像，请使用以下作为img路径(记住要启用到存储链接，请在此处检查(：

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