bootstrap-fileinput 单图&多图上传

以下示例是在laravel框架下写的，html 和 js 代码里面包含了一些框架的语法

组件相关文档
https://www.bookstack.cn/read/ruoyi/spilt.7.9d13d5720da9d371.md

视图

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">单图 & 多图</div>
                <div class="panel-body">

                    {{-- 单图 --}}
                    <div class="form-group">
                        <label class="col-lg-1 col-sm-1 control-label">单图</label>
                        <div class="col-lg-11">
                            <input id="img" class="file" type="file" name="file" multiple=false>
                            <input type="hidden" id="img_v" name="img" value=""/>
                        </div>
                    </div>

                    {{-- 多图 --}}
                    <div class="form-group">
                        <label class="col-lg-1 col-sm-1 control-label">多图</label>
                        <div class="col-lg-11">
                            <input id="imgs" class="file" type="file" name="file" multiple=false>
                            <input type="hidden" id="imgs_v" name="imgs[]" value=""/>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

js

   <script type="text/javascript">
        // 单图
        $("#img").fileinput({
            language: 'zh',
            initialPreview: [
                @if(!empty($image))
                "<img src='{{ $image }}' width='200' class='file-preview-image'>",
                @endif
            ],
            initialPreviewConfig: [
                @if(!empty($image))
                {
                    caption: '{{ $image }}', // $image 为图片地址
                    width: '200px',
                    url: '{{ route('CommonUpImg') }}',
                    key: '{{ $image }}',
                },
                @endif
            ],
            overwriteInitial: false,
            showRemove: true,
            maxFileCount: 1, // 最大文件上传数
            allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'], // 上传文件的格式
            uploadUrl: "{{ route('CommonUpImg') }}", // 图片上传路由
            uploadExtraData: {'_token': "{{ csrf_token() }}"}, // 上传图片时需要 token 验证（laravel框架自带）
            deleteExtraData: {'_token': "{{ csrf_token() }}"}, // 删除
            initialPreviewShowDelete: true,
        }).on("fileuploaded", function (event, data, previewId, index) {
            $("#img_v").val(data.response.url);
        }).on("filedeleted", function (event, data, previewId, index) {
            $("#img_v").val('');
        });


        // 多图
        $("#imgs").fileinput({
            language: 'zh',
            initialPreview: [
                @if(!empty($images))
                    @foreach($images as $item)
                    "<img src='{{ $item }}' width='200' class='file-preview-image'>",
                    @endforeach
                @endif
            ],
            initialPreviewConfig: [
                @if(!empty($images))
                    @foreach($images as $item)
                    {
                        caption: '{{ $item }}',
                        width: '200px',
                        url: '{{ route('CommonUpImg') }}',
                        key: '{{ $item }}'
                    },
                    @endforeach
                @endif
            ],
            overwriteInitial: false,
            showRemove: true,
            maxFileCount: 5,
            allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],
            uploadUrl: "{{ route('CommonUpImg') }}",
            uploadExtraData: {'_token': "{{ csrf_token() }}"},
            deleteExtraData: {'_token': "{{ csrf_token() }}"},
            initialPreviewShowDelete: true
        }).on("fileuploaded", function (event, data, previewId, index) {
            $("#imgs_v").append('<input type="hidden" name="imgs[]" value="' + data.response.url + '">');
        }).on("filedeleted", function (event, data, previewId, index) {
            $(":input[name='imgs[]']").each(function () {
                if ($(this).val() == data) {
                    $(this).remove();
                }
            });
        });
    </script>

公用图片上传方法

路由：
Route::any('up_img', [
    'as' => 'CommonUpImg',
    'uses' => 'CommonController@upImg'
]);

方法：
    public function upImg(Request $request){
        $all = $request->all();

        if($request->hasFile('file')){
            $file = $request->file('file');

            // 取得文件的hash
            $hash = sha1_file($file->getRealPath());

            // 获取文件后缀名
            $extension_name = strtolower($file->getClientOriginalExtension());

            // 组装文件名
            $file_name =  $hash. '.' . $extension_name;

            // 文件保存路径
            $path = '/images/'.date('Ymd').'/';
            $file_path = $path . $file_name;

            try {
                // 判断文件夹是否存在
                $dir_path = Common::isDir(public_path() . $path);

                $file->move($dir_path, $file_name);

                // config('domain.img_domain') 为访问图片的图域名 例：img.domain.com
                $img_url = [
                    //'url' => sprintf('http://%s/%s', config('domain.img_domain'), $file_path)
                    'url' => $file_path
                ];
            }
            catch (\Exception $e){
                $msg = $e->getMessage();
                Log::info('upImg $e:');
                Log::info($msg);
            }

        }
        else{
            $img_url = ['url' => ''];
        }

        return $img_url;
    }

    static function isDir($dir_path){

        if(strpos($dir_path, '\\')){
            $dir_path = str_replace('\\', '/', $dir_path);
        }
        Log::info('dir $dir_path: '. $dir_path);

        if(is_dir($dir_path)){
            Log::info('dir exist');
        }
        else{
            Log::info('dir does not exist');
            // 创建新的文件夹 并赋予新文件夹 777权限（liunx环境下权限问题）
            $dir_res = mkdir($dir_path, 0777, true);
        }

        return $dir_path;
    }