bootstrap-fileinput多图上传

 这里用的ruoyi大佬的开源 由BUG大佬提供方法   废话不多说 上代码

 

 
            

                多文件上传
                

                    
                
            

  这段用于上传成功回调赋值给隐藏input

 var imgs = [];    //这里数组接收并且，号拼接
        $("#fileinput-demo-1").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': ctx + "MultiuploadFile", //上传服务器地址
            dropZoneTitle: "选择商品首图,可多传",
            overwriteInitial: false,
            initialPreviewAsData: true,
        }).on("fileuploaded", function (event, data, previewId, index) {
                //后台上传成功返回路径
            imgs.push(data.response.url);
                //把值赋给隐藏标签input
            $("#commodityImg").attr("value", imgs);
        });

后台上传方法 普通上传即可 无需数组接收

/**
	 * 多图通用上传请求
	 */
	@PostMapping("/MultiuploadFile")
	@ResponseBody
	public AjaxResult MultiuploadFile(@RequestParam(value="fileName")MultipartFile file) throws Exception {
		try {
			// 上传文件路径
			String filePath = configServerApplication.getUploadPath();
			// 上传并返回新文件名称
			String fileName = FileUploadUtils.upload(filePath, file);
			String url = serverConfig.getUrl() + UPLOAD_PATH + fileName;
			AjaxResult ajax = AjaxResult.success();
			ajax.put("fileName", fileName);
			ajax.put("url", url);
			return ajax;
		} catch (Exception e) {
			return AjaxResult.error(e.getMessage());
		}
	}