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

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

附言 1  ·  1个月前
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 9
doobi

有点恐怖,兄弟,你测试过了吗。
资源全部发布在js目录下,组件调用的确是vendor/laravel-admin-ext/large-file-upload/js/

file

file

1个月前
doobi
1个月前
doobi

很明显,你的发布没有做任何的操作

1个月前
DianWang

@doobi sorry,文档写错了,是这个命令

 php artisan vendor:publish --tag=large-file-upload

谢谢测试!

1个月前
doobi

@DianWang
嗯嗯,已经测试成功,但是create的时候没问题,edit编辑操作时,保存后该字段的值又变为空了

1个月前
doobi

@DianWang 视图可以发布到本地吗,还是可以直接把large-file-upload/resources/views/large_file_upload.blade.php复制到views/vendor/large-file-upload/large_file_upload.blade.php

1个月前
DianWang

@doobi 我看了下,少了个标签,修复了下视图,你把本地删除,重新安装一下吧

1个月前

可不可以配置上传到云存储平台?

1周前
DianWang

@xuemingzhi 各个平台不一样的,你可以用七牛云的js-sdk自己封装一个,也是分片上传的,没什么难度。

1周前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!