如何解决livewire中的图像预览问题?



我正试图通过以下YouTube系列和在第18个视频我发现了一个问题。当我上传产品图片时,由于上传的图片没有预览,我无法在公共路径上找到图片。我已经添加了我所有的代码。请帮助我任何人。提前感谢。主要技术:Laravel->Livewire(temporaryUrl)

下面是web.php的代码
<?php
use AppHttpLivewireHomeComponent;
use AppHttpLivewireShopComponent;
use AppHttpLivewireCartComponent;
use AppHttpLivewireCheckoutComponent;
use AppHttpLivewireContactComponent;
use AppHttpLivewireAboutComponent;
use AppHttpLivewireDetailsComponent;
use AppHttpLivewireCategoryComponent;
use AppHttpLivewireHeaderSearchComponent;
use AppHttpLivewireSearchComponent;
use AppHttpLivewireUserUserDashboardComponent;
use AppHttpLivewireAdminAdminDashboardComponent;
use AppHttpLivewireAdminAdminCategoryComponent;
use AppHttpLivewireAdminAdminAddCategoryComponent;
use AppHttpLivewireAdminAdminEditCategoryComponent;
use AppHttpLivewireAdminAdminProductComponent;
use AppHttpLivewireAdminAdminAddProductComponent;
use IlluminateSupportFacadesRoute;
/*
|-------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/',HomeComponent::class);
Route::get('/shop',ShopComponent::class);
Route::get('/cart',CartComponent::class)->name('product.cart');
Route::get('/checkout',CheckoutComponent::class);
Route::get('/contact',ContactComponent::class);
Route::get('/about',AboutComponent::class);
Route::get('/product/{slug}',DetailsComponent::class)->name('product.details');
Route::get('/product-category/{category_slug}',CategoryComponent::class)->name('product.category');
Route::get('/search',SearchComponent::class)->name('product.search');
// Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
//     return view('dashboard');
// })->name('dashboard');

// For User and Customer
Route::middleware(['auth:sanctum','verified'])->group(function(){
Route::get('/user/dashboard',UserDashboardComponent::class)->name('user.dashboard');
});
// For Admin
Route::middleware(['auth:sanctum','verified','authadmin'])->group(function(){
Route::get('/admin/dashboard',AdminDashboardComponent::class)->name('admin.dashboard');
Route::get('/admin/categories',AdminCategoryComponent::class)->name('admin.categories');
Route::get('/admin/category/add',AdminAddCategoryComponent::class)->name('admin.addcategory');
Route::get('/admin/category/edit/{category_slug}',AdminEditCategoryComponent::class)->name('admin.editcategory');
Route::get('/admin/products',AdminProductComponent::class)->name('admin.products');
Route::get('/admin/product/add',AdminAddProductComponent::class)->name('admin.addproduct');
});
下面是AdminAddProductComponent.php的代码
<?php
namespace AppHttpLivewireAdmin;
use AppModelsProduct;
use AppModelsCategory;
use CarbonCarbon;
use LivewireComponent;
use LivewireWithFileUploads;
use IlluminateSupportStr;
class AdminAddProductComponent extends Component
{
use WithFileUploads;
public $name;
public $slug;
public $short_description;
public $description;
public $regular_price;
public $sale_price;
public $SKU;
public $stock_status;
public $featured;
public $quantity;
public $image;
public $category_id;
public function mount()
{
$this->stock_status = 'instock';
$this->featured = 0;
}
public function generateslug()
{
$this->slug = Str::slug($this->name,'-');
}
public function addProduct()
{
$product                    = new Product();
$product->name              = $this->name;
$product->slug              = $this->slug;
$product->short_description = $this->short_description;
$product->description       = $this->description;
$product->regular_price     = $this->regular_price;
$product->sale_price        = $this->sale_price;
$product->SKU               = $this->SKU;
$product->stock_status      = $this->stock_status;
$product->featured          = $this->featured;
$product->quantity          = $this->quantity;
$imageName = Carbon::now()->timestamp. '.' . $this->image->extension();
$this->image->storeAs('products',$imageName);
$product->image             = $imageName;
$product->category_id       = $this->category_id;
$product->save();
session()->flash('message','New product has beed added successfully');
}
public function render()
{
$categories = Category::all();
return view('livewire.admin.admin-add-product-component',['categories'=>$categories])->layout('layouts.base');
}
}
下面是admin-add-product-component.blade.php的代码
<div>
<div class="container" style="padding: 30px 0;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
Add New Product
</div>
<div class="col-md-6">
<a href="{{route('admin.products')}}" class="btn btn-success pull-right">All Products</a>
</div>
</div>
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form class="form-horizontal" enctype="multipart/form-data" wire:submit.prevent="addProduct">
<!-- 1st information -->
<div class="form-group">
<label class="col-md-4 control-label">Product Name</label>
<div class="col-md-4">
<input type="text" placeholder="Product Name" class="form-control input-md" wire:model='name' wire:keyup='generateslug' >
</div>
</div>
<!-- 2nd information -->
<div class="form-group">
<label class="col-md-4 control-label">Product Slug</label>
<div class="col-md-4">
<input type="text" placeholder="Product Slug" class="form-control input-md" wire:model='slug' >
</div>
</div>
<!-- 3rd information -->
<div class="form-group">
<label class="col-md-4 control-label">Short Description</label>
<div class="col-md-4">
<textarea placeholder="Short Description" name="" class="form-control input-md" wire:model='short_description' ></textarea>
</div>
</div>
<!-- 4th information -->
<div class="form-group">
<label class="col-md-4 control-label">Description</label>
<div class="col-md-4">
<textarea placeholder="Description" name="" class="form-control input-md" wire:model='description'></textarea>
</div>
</div>
<!-- 5th information -->
<div class="form-group">
<label class="col-md-4 control-label">Regular Price</label>
<div class="col-md-4">
<input type="text" placeholder="Regular Price" class="form-control input-md" wire:model='regular_price'>
</div>
</div>
<!-- 6th information -->
<div class="form-group">
<label class="col-md-4 control-label">Sale Price</label>
<div class="col-md-4">
<input type="text" placeholder="Sale Price" class="form-control input-md" wire:model='sale_price' >
</div>
</div>
<!-- 7th information -->
<div class="form-group">
<label class="col-md-4 control-label">SKU</label>
<div class="col-md-4">
<input type="text" placeholder="SKU" class="form-control input-md" wire:model='SKU'>
</div>
</div>
<!-- 8th information -->
<div class="form-group">
<label class="col-md-4 control-label">Stock</label>
<div class="col-md-4">
<select class="form-control" wire:model='stock_status'>
<option value="instock">Instock</option>
<option value="outofstock">Out of stock</option>
</select>
</div>
</div>
<!-- 9th information -->
<div class="form-group">
<label class="col-md-4 control-label">Featured</label>
<div class="col-md-4">
<select class="form-control" wire:model='featured' >
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<!-- 10th information -->
<div class="form-group">
<label class="col-md-4 control-label">Quantity</label>
<div class="col-md-4">
<input type="text" placeholder="Quantity" class="form-control input-md" wire:model='quantity' >
</div>
</div>
<!-- 11th information -->
<div class="form-group">
<label class="col-md-4 control-label">Product Image</label>
<div class="col-md-4">
<input type="file" class="input-file" wire:model='image'>
@if ($image)
<img src="{{$image->temporaryUrl()}}" width="60">
@endif
</div>
</div>
<!-- 12th information -->
<div class="form-group">
<label class="col-md-4 control-label">Category</label>
<div class="col-md-4">
<select class="form-control" wire:model='category_id'>
<option value="">Select Category</option>
@foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Add New Product</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

我还更改了文件系统。php中的路径。

<?php
return [
/*
|--------------------------------------------------------------------------
| Default Filesystem Disk
|--------------------------------------------------------------------------
|
| Here you may specify the default filesystem disk that should be used
| by the framework. The "local" disk, as well as a variety of cloud
| based disks are available to your application. Just store away!
|
*/
'default' => env('FILESYSTEM_DRIVER', 'local'),
/*
|--------------------------------------------------------------------------
| Filesystem Disks
|--------------------------------------------------------------------------
|
| Here you may configure as many filesystem "disks" as you wish, and you
| may even configure multiple disks of the same driver. Defaults have
| been setup for each driver as an example of the required options.
|
| Supported Drivers: "local", "ftp", "sftp", "s3"
|
*/
'disks' => [
'local' => [
'driver' => 'local',
'root' => public_path('assets/images'),
],
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
],
's3' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
'endpoint' => env('AWS_ENDPOINT'),
'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
],
],
/*
|--------------------------------------------------------------------------
| Symbolic Links
|--------------------------------------------------------------------------
|
| Here you may configure the symbolic links that will be created when the
| `storage:link` Artisan command is executed. The array keys should be
| the locations of the links and the values should be their targets.
|
*/
'links' => [
public_path('storage') => storage_path('app/public'),
],
];

谁来帮帮我。

问题似乎出在

@livewireStyles
Your code will be here........
@livewireScripts

你不用它们。它们对于livewire是必不可少的。

除此之外,你看起来很完美。

<input type="file" class="input-file" wire:model='image'>
@if ($image)
<img src="{{$image->temporaryUrl()}}" width="60">
@endif

如果问题仍然没有解决,请共享web控制台的错误。

改成

$imageName = Carbon::now()->timestamp. '.' . $this->image->extension();

必须

$imageName = Carbon::now()->timestamp. '.' .$ this→→形象延伸()

;

最新更新