bootstrap-fileinput批量上传图片及后台代码

引入css，js文件 （https://download.csdn.net/download/qq_44045573/16601713?spm=1001.2014.3001.5501）

<link th:href="@{/static/assets/js/plugins/bootstrap-fileinput/css/fileinput.css}" rel="stylesheet">
<script th:src="@{/static/assets/js/plugins/bootstrap-fileinput/js/fileinput.js}"></script
<script th:src="@{/static/assets/js/plugins/bootstrap-fileinput/js/locales/zh.js}"></script>

html页面

   <button type="button" class="btn btn-outline btn-default" data-toggle="modal" data-target="#imageModal">
                                    <i class="glyphicon glyphicon-picture" aria-hidden="true"> 上传图片</i>
 </button>
<!--上传图片-->
<div class="modal inmodal fade" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog  modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">上传图片</h4>
            </div>
            <div class="modal-body">
                <input id="imageFile" name="file" type="file" multiple="multiple" data-show-caption="true">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>

                </div>

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

js页面

$(function () {
 
    initFileInput("imageFile");
})

function initFileInput(ctrlName) {
    var control = $('#' + ctrlName);
    control.fileinput({
        language: 'zh', //设置语言
        uploadUrl: "/batchPersonImage", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png', "jpeg", "bmp"],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: false, //默认异步上传false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: true,//是否显示拖拽区域
        maxFileSize: 200,//单位为kb，如果为0表示不限制文件大小
        minFileCount: 0,
        maxFileCount: 12, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        layoutTemplates: {
            //actionDelete:'', //去除上传预览的缩略图中的删除图标
            //actionUpload:'',//去除上传预览缩略图中的上传图片；
            //actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
        },
    }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
        console.log('文件上传成功！');
      
        console.log('文件上传成功！' + data.response.id);

    }).on('fileerror', function (event, data, msg) {  //一个文件上传失败
        console.log('文件上传失败！' + data.id);
    })
}

后台代码

  /**
     * 批量保存
     *
     * @param file
     * @return
     */
    @PostMapping("/batchPersonImage")
    public void batchPersonImage(@RequestParam(value = "file") MultipartFile[] file) {
        System.out.println(file.length);
        if (file != null && file.length > 0) {
            List<String> fileName = new ArrayList<>();
            try {
                for (int i = 0; i < file.length; i++) {
                    if (!file[i].isEmpty()) {
                        fileName.add(file[i].getOriginalFilename());
                    }
                }
                //上传成功
                if (fileName != null && fileName.size() > 0) {
                    System.out.println("上传成功！");
                    System.out.println(fileName);
                } else {
                    System.out.println("上传失败！文件格式错误！");
                }
            } catch (Exception e) {
                e.printStackTrace();
                System.out.println("上传出现异常！异常出现在：class.UploadController.insert()");
            }
        } else {
            System.out.println("没有检测到文件！");
        }
       
    }

遇到的问题一：不能批量选择图片，选择的图片总是会替换上一张已选的图片

解决问题一：html页面的file类型的input要加 multiple

问题二：后台无法接受到file文件

解决问题二：是因为html页面上的file类型的input name与后台接收的@RequestParam(value = "file")不一致

问题三：bootstrap-fileinput上传图片是一张一张去上传，后台接收到的每次只是一张图片

解决问题三：