[转]为 Laravel-admin 的 Form 控件做一个大文件上传的扩展包

原文 https://laravel-china.org/articles/18997

注:阅读本文需要了解模型表单的自定义工具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