springboot实现上传图片到服务器，前端及java后台代码总结

后台代码

```java
 @RequestMapping(value = "/image/save-test", method = RequestMethod.POST)
    @ResponseBody
    public JsonResult upLoadImg(@RequestParam("images") MultipartFile file, HttpServletRequest request) throws IOException {
   
   
   
        // 设置文件上传后的路径
        String filePath = getFtpPath() + rootPath;
        // 获取文件名后缀名
        String suffix = file.getOriginalFilename();
        //创建文件路径
        File dest = new File(filePath + suffix);
        // 检测是否存在目录
        if (!dest.getParentFile().exists()) {
   
   
   
            //假如文件不存在即重新创建新的文件已防止异常发生
            dest.getParentFile().mkdirs();
        }
        try {
   
   
   
            //方法将上传文件写到服务器上指定的文件
            file.transferTo(dest);
            String directory = dest.getCanonicalPath();
            CabinetEntity entity1 = new CabinetEntity();
            entity1.setImgPath(directory);
            return JsonResult.jsonResultOK();
        } catch (Exception e) {
   
   
   
            logger.error("上传失败", e);
            return JsonResult.jsonResultERROR("上传失败");
        }
    }

前台代码

   </div>图片：<input type="file" class="file" id="img" multiple name="images"><br>
    js
    $("#img").fileinput({
   
   
   
        language : 'zh',
        uploadUrl : $rootScope.getWaySystemApi+'/image/save-test',
        showUpload: true, //是否显示上传按钮
        showRemove : true, //显示移除按钮
        showPreview : true, //是否显示预览
        showCaption: false,//是否显示标题
        autoReplace : true,
        minFileCount: 0,
        uploadAsync: true,
        maxFileCount: 10,//最大上传数量
        browseOnZoneClick: true,
        msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
        //enctype: 'multipart/form-data',
        // overwriteInitial: false,//不覆盖已上传的图片
        allowedFileExtensions : [ "jpg", "png", "gif" ],
        browseClass : "btn btn-primary", //按钮样式
        previewFileIcon : "<i class='glyphicon glyphicon-king'></i>"
    }).on("fileuploaded", function(e, data) {
   
   
   //文件上传成功的回调函数，还有其他的一些回调函数，比如上传之前...
        console.log("上传成功");
    });
    $("#img").change(function(){
   
   
      
     var file = this.files[0];
       if (window.FileReader) {
   
   
       
                var reader = new FileReader();    
                reader.readAsDataURL(file);    
                //监听文件读取结束后事件    
              reader.onloadend = function (e) {
   
   
   
                   // 图片base64
                   $scope.data[0].base = e.target.result;
                };    
           } 
    });

粉丝福利
springboot实现上传图片到服务器，前端及java后台代码总结