為 Laravel-admin 的 Form 控制元件做一個大檔案上傳的擴充套件包

DianWang發表於2018-10-29
LaravelORM控制元件套件

注：閱讀本文需要了解模型表單的自定義工具及laravel-admin擴充套件開發;本文的擴充套件包是基於peinhu的AetherUpload-laravel大檔案上傳包的一個整合方案。

1,生成擴充套件包骨架：

php artisan admin:extend laravel-admin-ext/large-file-upload --namespace=Encore\\LargeFileUpload

2,composer.json的配置修改不再贅述，移除不必要的檔案目錄，並新建LargeFileField.php檔案，精簡後如圖
file
說明：
assets資料夾存放需要釋出的靜態檔案js,css等等
views目錄存放需要用到的blade模板檢視檔案
src目錄存放具體的邏輯檔案
3,修改LargeFileUpload.php

<?php

namespace Encore\LargeFileUpload;

use Encore\Admin\Extension;

class LargeFileUpload extends Extension
{
   //副檔名稱
    public $name = 'large-file-upload';
   //擴充套件檢視目錄
    public $views = __DIR__.'/../resources/views'; 
   //擴充套件靜態檔案目錄
    public $assets = __DIR__.'/../resources/assets';
}

4,我們把需要用的js或css指令碼放到assets目錄下，將檢視放到views目錄下，如圖：
file
5,修改LargeFileUploadServiceProvider.php

    public function boot(LargeFileUpload $extension)
    {
        if (! LargeFileUpload::boot()) {
            return ;
        }
        //靜態檔案的釋出目錄
        if ($this->app->runningInConsole() && $assets = $extension->assets()) {
            $this->publishes(
                [$assets => public_path('vendor/laravel-admin-ext/large-file-upload')],
                'large-file-upload'
            );
        }
       //配置檢視的名稱空間
        if ($views = $extension->views()) {
            $this->loadViewsFrom($views, 'large-file-field');
        }
        //配置laravel-admin啟動時載入擴充套件包裡的靜態檔案
        Admin::booting(function (){
            Admin::js('vendor/laravel-admin-ext/large-file-upload/js/aetherupload.admin.js');
            Admin::js('vendor/laravel-admin-ext/large-file-upload/js/bootstrap.file-input.js');
            Admin::js('vendor/laravel-admin-ext/large-file-upload/js/spark-md5.min.js');
        });

    }

6，修改LargeFileField.php檔案

<?php
namespace Encore\LargeFileUpload;

use Encore\Admin\Form\Field;

class LargeFileField extends Field
{
/*
* 此處的large-file-field即為上一步中設定的檢視的名稱空間
* 直接可以呼叫resource目錄下的views目錄中的large_file_upload.blade.php檔案
*/
    public $view = 'large-file-field::large_file_upload';

    public function render()
    {
        $name = $this->formatName($this->column);

        $this->script = <<<SRC

        $('#{$name}-file').bootstrapFileInput();
        $('#{$name}-file').change(function(){
             aetherupload('{$name}', this, 'file').success(getPath).upload('{$name}');
        });

SRC;
        return parent::render();
    }
}

7，本地載入擴充套件包，在需要安裝該擴充套件包的專案根目錄的composer.json檔案中(注意不是擴充套件包目錄)，加入如下程式碼：

"repositories": [
    {
        "type": "path",
        "url": "app/Admin/extensions/laravel-admin-ext/large-file-upload"
    }
]

8，本地安裝併發布靜態資源

composer require laravel-admin-ext/large-file-upload
php artisan vendor:publish --tag=large-file-upload

9, 註冊進laravel-admin,在app/Admin/bootstrap.php中新增以下程式碼：(當然你可以起其他的名字)

Encore\Admin\Form::extend('largefile', \Encore\LargeFileUpload\LargeFileField::class);

10, 在控制器中呼叫：

$form->largefile('ColumnName', 'LabelName');

效果如圖：
file
11,上傳github併發布Packagist,就可以隨時使用，不必每次都複製黏貼程式碼了。

總結：本文其實是對於laravel-admin文件中自定義工具開發和擴充套件開發的一個小整合，由於aetherupload專案對於laravel-admin並不友好，所以針對性的對於js指令碼和檢視邏輯進行了優化，完成了這個小擴充套件包。希望大家有開發出比較實用的擴充套件，也能貢獻出來，為開源事業做貢獻。
專案地址：https://github.com/Dianwoung/large-file-upload

相關文章