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

注：阅读本文需要了解模型表单的自定义工具及laravel-admin扩展开发;本文的扩展包是基于peinhu的AetherUpload-laravel大文件上传包的一个整合方案。

1,生成扩展包骨架：

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

2,composer.json的配置修改不再赘述，移除不必要的文件目录，并新建LargeFileField.php文件，精简后如图

说明：
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目录下，如图：

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');

效果如图：

11,上传github并发布Packagist,就可以随时使用，不必每次都复制黏贴代码了。

总结：本文其实是对于laravel-admin文档中自定义工具开发和扩展开发的一个小整合，由于aetherupload项目对于laravel-admin并不友好，所以针对性的对于js脚本和视图逻辑进行了优化，完成了这个小扩展包。希望大家有开发出比较实用的扩展，也能贡献出来，为开源事业做贡献。
项目地址：https://github.com/Dianwoung/large-file-up...

本作品采用《CC 协议》，转载必须注明作者和本文链接