包简介

Livewire upload image component.

README 文档

README

Demo

Features

Upload image
Upload multiple images
Remove image

Requirements

Laravel Livewire 2.0

Installation

You can install the package via composer:

composer require sherwinchia/livewire-image-uploader

Usage

Add the Livewire directive into component blade page (E.g form-component.blade.php).

<livewire:image-uploader name="foo"> 
or
<livewire:image-uploader name="foo" size="2048" multiple>

Props	Type	Required	Description
name	string	✅	Parent component public properties to store uploaded images name.
multiple	bool	❌	Enable multiple upload. (Default: false)
size	int	❌	Image size limit. (Default: 1024KB)

Add public properties to store the name of the images uploaded in array and use the ImageUploader trait in the component code (E.g FormComponent.php).

<?php
namespace App\Http\Livewire;
.
.
use Sherwinchia\LivewireImageUploader\Http\Traits\ImageUploader;

class FormComponent extends Component{
    use ImageUploader;
    public $foo;
}

Every time there are changes on the images (remove/upload), the component will trigger an event which trigger method in the parent component. The method will update the $foo properties with an array of new images name.

Uploaded File

For now all uploaded images will be stored inside storage/public/image-uploader. To access the image from the frontend you need to create a symbolic link from public/storage to storage/app/public. To create the symbolic link run:

php artisan storage:link

To display the image in frontend:

<img src="{{ asset('storage/image-uploader/' . $imageName) }}">

Styling

To add the styling, you need publish the package assets folder to your project public folder. To publish the package assets folder run:

php artisan vendor:publish --provider="Sherwinchia\LivewireImageUploader\LivewireImageUploaderServiceProvider" --tag="assets"

Next, include the css file inside the assets folder in your HTML page section:

<head>
     ...
    <link href="{{ asset('image-uploader/css/app.css') }}" rel="stylesheet">
</head>

sherwinchia/livewire-image-uploader 适用场景与选型建议

sherwinchia/livewire-image-uploader 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 88 次下载、GitHub Stars 达 20，最近一次更新时间为 2021 年 05 月 26 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「image」「laravel」「uploader」「livewire」「sherwinchia」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 sherwinchia/livewire-image-uploader 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 sherwinchia/livewire-image-uploader 我们能提供哪些服务？

定制开发 / 二次开发

基于 sherwinchia/livewire-image-uploader 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发