后台代码

```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;
                };    
           } 
    });
    

粉丝福利

微信搜一搜「 码上代码」回复【面试资料】，【技术书籍】有我准备的一线大厂面试资料和简历模板和java必看技术书籍

大家好，感谢各位人才
能看到这里的都是您已是佼佼者
我会持续为大家做技术分享
预知下篇如何
请点赞、收藏和评论，我们下期见！

本文同步分享在 博客“码上代码”（CSDN）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。