关于bootstrap-inputfile初始化加载图片，修改图片重新上传文件的坑

关于bootstrap-inputfile初始化加载，上传文件的坑

图片的展示与上传，使用bootstrap-inputfile，但是由于自己遇到的问题网上查询不到，特此记录（第一次写，请多包涵）

打开编辑页面需要展示已有图片，并能继续上传新的，springboot项目，直接根据Thymeleaf从后台获取modle这里就不详细介绍了，获取到图片链接后，进行初始化bootstrap-inputfile，但是拼接字符串放到配置中显示失败

var control = $('#' + ctrlName);
control.fileinput({
    overwriteInitial: false, //不覆盖已存在的图片
    //下面几个就是初始化预览图片的配置
    initialPreviewAsData: true,
    initialPreviewFileType: 'image',
    -----------------------------------------------------------------
    //就是这里，拼接字符串后，放到这里无法显示，
    //var url= [];  这里要创建数组对象，然后把接口中每条url进行插入数组操作，就会正常显示了
    -----------------------------------------------------------------
    initialPreview:url,
    initialPreviewConfig: [],
    enctype: 'multipart/form-data',
    validateInitialCount:true,
    layoutTemplates :{
        actionUpload:'',//去除上传预览缩略图中的上传图片
    },
    previewFileIcon: "",
    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
}).on('filepreupload', function(event, data, previewId, index) {     //上传中
    var form = data.form, files = data.files, extra = data.extra,
        response = data.response, reader = data.reader;
    console.log('文件正在上传');
}).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
    console.log('文件上传成功！'+data.id);
}).on('fileerror', function(event, data, msg) {  //一个文件上传失败
    console.log('文件上传失败！'+data.id);
})

下面放上详细代码：
1.引入所需js，css
bootstrap-fileinput-master：https://pan.baidu.com/s/1rFMzknS1Bra6vVwl3jgUSQ 提取码： fk35

   <link type="text/css" rel="stylesheet" href="/bootstrap-fileinput-master/css/fileinput.css" />
   <script type="text/javascript" src="/bootstrap-fileinput-master/js/fileinput.js"></script>
   <script type="text/javascript" src="/bootstrap-fileinput-master/js/locales/zh.js"></script>     

这里还需要引入bootstrap的js文件

2.标签选择图片

<input id="input-id" class="input-id" name="beforefile" multiple type="file">

3.初始化js

var url= [];
url.push(“图片地址”);

var control = $('#' + beforefile);
control.fileinput({
     language: 'zh', //设置语言
     uploadUrl: "upload/insert", //上传的地址
     allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
     //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
     uploadAsync: false, //默认异步上传
     showUpload: false, //是否显示上传按钮
     showRemove : true, //显示移除按钮
     showPreview : true, //是否显示预览
     showCaption: false,//是否显示标题
     browseClass: "btn btn-primary", //按钮样式
     //dropZoneEnabled: true,//是否显示拖拽区域
     //minImageWidth: 50, //图片的最小宽度
     //minImageHeight: 50,//图片的最小高度
     //maxImageWidth: 1000,//图片的最大宽度
     //maxImageHeight: 1000,//图片的最大高度
     //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
     //minFileCount: 0,
     //maxFileCount: 10, //表示允许同时上传的最大文件个数
     overwriteInitial: false, //不覆盖已存在的图片
     //下面几个就是初始化预览图片的配置
     initialPreviewAsData: true,
     initialPreviewFileType: 'image',
     initialPreview:url,
     initialPreviewConfig: [
         {caption: 图片的名字，自己设定, size: 576237, width: "120px", url: "删除图片url", key: 1},
         {caption: 图片的名字，自己设定, size: 576237, width: "120px", url: "删除图片url", key: 1}
     ],
     enctype: 'multipart/form-data',
     validateInitialCount:true,
     layoutTemplates :{
         actionUpload:'',//去除上传预览缩略图中的上传图片
     },
     previewFileIcon: "",
     msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
 }).on('filepreupload', function(event, data, previewId, index) {     //上传中
     var form = data.form, files = data.files, extra = data.extra,
         response = data.response, reader = data.reader;
     console.log('文件正在上传');
 }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
     console.log('文件上传成功！'+data.id);
 }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
     console.log('文件上传失败！'+data.id);
 })

这样就可以正常使用了，