记录使用bootstrap-fileinput插件遇到的问题

前言

1、传额外参数

 uploadExtraData：初始化时只能获取表单赋值数据，未赋值或修改的数据无法获取，所以需要用一个回掉函数

2、去除按钮

layoutTemplates：{

actionUpload: ''//去除上传预览缩略图中的上传按钮

close: ''//去除右上角X 清空文件按钮

//其它按钮去除，请查看源码中的【layoutTemplates】

}

3、上传成功后调用移除按钮

$(".fileinput-remove-button").click();

4、同步和异步上传

uploadAsync: false//是否为异步上传，默认（true）异步上传，你会发现上传多张图片，请求就会发送多次，每次只提交一张图片，如果想一次提交所有图片，则需要将uploadAsync设置为false

实现代码

    $(document).ready(function () {
        $("#fileinput").fileinput({
            language: 'zh'//设置语言
            , layoutTemplates: {
                actionUpload: ''//去除上传预览缩略图中的上传按钮
                , close: ''//去除右上角X 清空文件按钮
            }
            , allowedFileExtensions: ['jpg', 'png', 'jpeg']
            , showUpload: true//是否显示上传按钮
            , contentType: 'multipart/form-data; charset=UTF-8'
            , uploadUrl: prefix + "/upload"
            , maxFileSize: 20480//单位为kb，如果为0表示不限制文件大小
            , overwriteInitial: false
            , minFileCount: 1//表示同时最小上传的文件个数
            , maxFileCount: 4//表示允许同时上传的最大文件个数
            , uploadAsync: false//同步上传
            , uploadExtraData: function () {//上传文件时额外传递的参数设置
                return $('#form-advertisement-add').serializeJson();
            }
        }).on('filebatchuploadsuccess', function (event, data, previewId, index) {//批量上传成功结果处理
            if (data.response.code != 0) {
                $.modal.alert("文件上传失败，请稍后重试！");
                return false;
            }
            //上传成功调用移除按钮
            $(".fileinput-remove-button").click();
        }).on('filebatchuploaderror', function (event, data, msg) {//批量上传错误结果处理
            console.log(data);
            $.modal.alert(msg);
            return false;
        });
    });

    @PostMapping("/upload")
    @ResponseBody
    public AjaxResult fileUpload(@RequestParam("file") MultipartFile[] file, Advertisement advertisement){
        JSONArray jsonArray = new JSONArray();
        try {
            // 上传文件路径
            String filePath = Global.getUploadPath();
            // 上传并返回新文件名称
            for (int i = 0; i < file.length; i++) {
                JSONObject jsonObject = new JSONObject();
                String fileName = FileUploadUtils.upload(filePath, file[i]);
                jsonObject.put("fileUrl", fileName);
                jsonArray.add(jsonObject);
            }
            // 获取当前的用户
            SysUser currentUser = ShiroUtils.getSysUser();
            //传入登录账号
            advertisement.setCreateBy(currentUser.getLoginName());
            advertisement.setFileId(JSON.toJSONString(jsonArray));
            advertisementService.insertAdvertisement(advertisement);
        } catch (Exception e) {
            return AjaxResult.error("上传失败：" + e);
        }
        return AjaxResult.success("上传成功");
    }

实现效果