解决laravel-admin多图上传数量超出bug

Laravel-admin version 1.8.17

控制器中设置初始化信息（主要是这个最大总文件数 maxTotalFileCount）

$form->multipleImage('goods_images', __('Goods images'))->options([
    'language' => 'zh',         // 设置语言（不管用，我是去 public/vendor/laravel-admin/bootstrap-fileinput/js/fileinput.min.js 手动改的）
    'maxFileCount' => Goods::GOODS_IMAGES_COUNT,         // 单次上传最大文件数
    'maxTotalFileCount' => Goods::GOODS_IMAGES_COUNT,    // 最大总文件数
    'maxFileSize' => 2048,    // 单位KB
    'showCaption' => false, // 是否显示输入框
    'showBrowse' => true,  //是否开启input的浏览文件 true:开启
    'msgFilesTooMany' => "选择上传的文件数量({n}) 超过允许的最大数值{m}！", // 上传数量超出的错误提示
    'msgSizeTooLarge' => '文件 “{name}” ({size} KB) 超过了允许大小 {maxSize} KB.', // 图片大小超出的提示
])->removable()->help('最多上传5张，单张大小不超过2M');// 多图

修改js代码：进入到vendor/encore/laravel-admin/src/Form/Field/MultipleFile.php，查找setupScripts方法，在其后加入如下代码：

 protected function setupScripts($options)
    {
        // .....这是原有代码.....

        // 开始
        // 修复多度上传最大数量控制bug问题

        $optionsArr = json_decode($options, true);
        if (!empty($optionsArr['maxTotalFileCount'])) {
            $maxTotalFileCount = $optionsArr['maxTotalFileCount'];
            $maxTotalFileCountIdex = $maxTotalFileCount - 1;

            $this->script .= <<<EOT
$("input{$this->getElementClassSelector()}").on('filebatchselected', function (evt, file) {
        // 选择图片后执行，用于判断选择的图片是否超出限制，超出限制就禁用选择按钮
        // 比如只允许上传4张，我分两次上传，第一次上传两张，第二次上传3张，此时手动禁用选择按钮

        console.log(polymeric);
        if ($(this).parent().parent().find('.kv-preview-thumb').length > {$maxTotalFileCount}) {
            alert('图片数量最多为{$maxTotalFileCount}');

            // 定义超出制定数量的div
            var polymeric = $(this).parent().parent().find('.kv-preview-thumb:gt({$maxTotalFileCountIdex})');
            // 定义超出制定数量的缓存div
            var polymericCache = $(this).parent().parent().find('.kv-zoom-cache:gt({$maxTotalFileCountIdex})');

            // 删除
            polymeric.each(function(index, value){
                value.remove();
            });
            // 删除
            polymericCache.each(function(index, value){
                value.remove();
            });

        }
    })
    .on('filebatchuploadcomplete', function (evt, file) {
        // 只会调用一次，所有图片都上传成功调用，这是为了弥补上传成功后部分DOM结构重新渲染，导致filebatchselected钩子中执行的操作失效
        if ($(this).parent().parent().find('.kv-preview-thumb').length > {$maxTotalFileCount}) {
            $("input{$this->getElementClassSelector()}").attr('disabled', 'disabled')
            $("input{$this->getElementClassSelector()}").closest('div.btn-file').addClass('btn-disabled');
        }
    })
    .on('fileuploaded', function (event, data, previewId, index) {
        // 上传成功几次就调用几次，把后端返回的地址附加到DOM结构上，为以后得操作做准备
        if (data.response.status == 1) {
            $(".file-preview-thumbnails").find('#' + previewId).attr('data-url', data.response.data.name);
        } else {
            alert(data.response.info);
        }
    })
    .on('fileclear', function (evt, file) {
        // 点击右上角叉叉执行
        $("input{$this->getElementClassSelector()}").removeAttr('disabled')
        $("input{$this->getElementClassSelector()}").closest('div.btn-file').removeClass('btn-disabled')
        $(".file-preview-thumbnails").find('.fileinput-upload-button').removeAttr('disabled')
    })
    .on("filesuccessremove", function (event, uploadedId, index) {
        // 仅对上传成功的图片有效，未上传的图片不执行这里
        // 延迟一秒后删除，否则不准确
        setTimeout(function () {
            if ($(this).parent().parent().find('.kv-preview-thumb').length < {$maxTotalFileCount}) {
                $("input{$this->getElementClassSelector()}").removeAttr('disabled')
                $("input{$this->getElementClassSelector()}").closest('div.btn-file').removeClass(
                    'btn-disabled')
            }
        }, 1000)
    })
    .on('fileremoved', function () {
        // 该事件钩子针对只选择不上传的情况
        if ($(this).parent().parent().find('.kv-preview-thumb').length <= {$maxTotalFileCount}) {
            $("input{$this->getElementClassSelector()}").removeAttr('disabled')
            $("input{$this->getElementClassSelector()}").closest('div.btn-file').removeClass('btn-disabled')
            $(".file-preview-thumbnails").find('.fileinput-upload-button').removeAttr('disabled')
        }
    });
EOT;

        }
        //结束

    }

经过以上步骤已经可以做到在页面上删除掉多余的图片了，但是！！！！保存时还是会存入数据库。

修改对应模型文件：app/WJY/Models/Goods.php，加入更新过程中处理逻辑

<?php

namespace App\WJY\Models;

use Illuminate\Database\Eloquent\Model;

class Goods extends Model
{
    // 设置goods_images字段最大上传图片数
    const GOODS_IMAGES_COUNT = 5;

    protected static function boot()
    {
        parent::boot(); // TODO: Change the autogenerated stub

        static::updating(function ($update) {
            // 更新时，计算图片数量，多出的进行删除
            if (!empty($update->goods_images) && count($update->goods_images) > self::GOODS_IMAGES_COUNT) {
                $update->goods_images = array_chunk($update->goods_images, self::GOODS_IMAGES_COUNT)[0];
                // dd($update->goods_images);

            }
        });

    }
}

至此结束。

z-song / laravel-admin

解决laravel-admin多图上传数量超出bug #5658

3169