README

laravel livewire 文件上传组件

要求

• php v8.2
• laravel v10
• livewire v3
• spatie/media-library v10

安装

composer install jhonoryza/laravel-fileupload-component

php artisan vendor:publish --provider=Jhonoryza\Component\FileUpload\FileUploadServiceProvider

快速开始

准备模型，例如设置模型

use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Jhonoryza\Component\FileUpload\Traits\InteractsWithFileUpload;

class Setting extends Model implements HasMedia
{
    use InteractsWithMedia;
    use InteractsWithFileUpload;

    public function registerMediaCollections() : void
    {
        $this->addMediaCollection('settings');
    }
}

准备 livewire 表单类

   /**
    * property to store multiple images
    */
    public $images = [];

   /**
    * listener when there is onFileReplace event from the component
    */
   #[On('images:onFileReplace')]
   public function replaceImages(array $images): void
   {
       $this->images = $images;
   }

   /**
    * listener when there is onFileAdded event from the component
    */
   #[On('images:onFileAdded')]
   public function addToImages(array $file): void
   {
       $this->images[$file['uuid']] = $file;
   }

   /**
    * form save function example, setting is a Model
    * we call syncFileUploadRequest function
    * to save images to media library
    */
    public function save()
    {
        $this->setting
            ->syncFileUploadRequest($this->images)
            ->toMediaCollection('settings');
    }

在创建或编辑 livewire 组件中

    <livewire:file-upload-component
        name="images"
        label="Image"
        :model="$setting"
        collection="settings"
        :multiple="true"
    />

在视图 livewire 组件中

    <livewire:file-upload-component
        name="images"
        label="Image"
        :model="$setting"
        collection="settings"
        :multiple="true"
        :canUploadFile="false"
    />

属性说明

• name 是必需的，将影响事件名称
• :model 需要传递一个实现 HasMedia 的 Model 类型的变量
• collection 是媒体集合名称
• :multiple 用于单文件上传或多个文件上传
• :canUploadFile 用于隐藏文件选择器

组件事件

此组件在临时上传开始时触发 2 个事件

• media:temporary-upload-started
• media:temporary-upload-finished

将 media 替换为 name 属性，例如 name 属性是 images

    <button
        x-data="{ disable: false }"
        x-bind:disabled="disable"
        x-bind:style="disable ? 'cursor: not-allowed' : ''"
        x-on:images:temporary-upload-started.window="disable = true"
        x-on:images:temporary-upload-finished.window="disable = false"
        type="submit"
        class="btn btn-primary"
    >
        Update Setting
    </button>

或者您可以像这样监听默认的 livewire 文件上传事件

    <button
        x-data="{ disable: false }"
        x-bind:disabled="disable"
        x-bind:style="disable ? 'cursor: not-allowed' : ''"
        x-on:livewire-upload-start.window="disable = true"
        x-on:livewire-upload-error.window="disable = false"
        x-on:livewire-upload-progress.window="disable = true"
        x-on:livewire-upload-finish.window="disable = false"
        type="submit"
        class="btn btn-primary"
    >
        Update Setting
    </button>

当文件被移除/加载或添加时，触发另外 2 个事件

• media:onFileReplace
• media:onFileAdded

将 media 替换为 name 属性，例如 name 属性是 images

   #[On('images:onFileReplace')]
   public function replaceImages(array $images): void
   {
       $this->images = $images;
   }

   #[On('images:onFileAdded')]
   public function addToImages(array $file): void
   {
       $this->images[$file['uuid']] = $file;
   }

接下来要做的

• 测试带有错误信息的验证
• 添加单元测试
• 与 session flash 交互后出现错误（session flash 数据丢失）

安全

如果您发现有关安全的错误，请通过 jardik.oryza@gmail.com 发送邮件，而不是使用问题跟踪器。

许可证

MIT 许可证（MIT）。有关更多信息，请参阅 许可证文件。