关于springboot的图片上传(异步实现)

1、使用到了layui框架中的文件上传，所以前端HTML查看如下：

<link rel="stylesheet" href="./layui/css/layui.css" />
<script type="text/javascript" src="./layui/layui.js" charset="utf-8"></script>
<form class="layui-form" enctype="multipart/form-data">
     <div class="layui-form-item">
         <label class="layui-form-label">
             <span class="x-red">*</span>头像
         </label>
         <div class="layui-upload">
        <!-- img 中显示图片，demoText中显示出发生异常的信息，点击按钮更新图片就会更新图片。-->
             <div class="layui-upload-list layui-input-inline">
             <img id="img" src="" class="layui-upload-img" title="头像" width="60px" height="60px" />
                 <p id="demoText"></p>
             </div>
             <button type="button" name="img" class="layui-btn" id="test1">更新图片</button>
         </div>
         <div><input type="hidden" name="headPath" id="headPath"></div>
     </div>
</form>

前端页面实现：

2、前端jq信息(通过响应按钮，前端将图片信息发送到后端的服务器，)：

<script>layui.use(['form', 'layer','laydate','upload'],
    function() {
        $ = layui.jquery;
        var laydate = layui.laydate;
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/updateImg' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    console.log(file);  // 前端上传这个文件名。
                    $('#img').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res == null){
                    alert("上传失败")
                }
                $("#headPath").val(res.data);
                console.log(res)
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
</script>

springboot后端java代码接收信息：
1、配置好json格式转换，先配置引用

 <!-- json格式转换-->
 <dependency>
     <groupId>com.alibaba</groupId>
     <artifactId>fastjson</artifactId>
     <version>1.2.28</version>
 </dependency>

2、设置配置application.properties信息

#单个文件大小
spring.servlet.multipart.maxFileSize=10MB
#总上传大小限制
spring.servlet.multipart.maxRequestSize=30MB

3、配置图片的下载位置以及修改图片名称

  // 更新图片信息
    @RequestMapping("updateImg")
    JSONObject updateImg(@RequestParam("file") MultipartFile file){

        // 获取 webapp目录
        System.out.println(this.getClass().getResource("/"));
        System.out.println(this.getClass().getResource("/").getPath());
        System.out.println(this.getClass().getResource("/").getPath().replaceFirst("/",""));
        String path = this.getClass().getResource("/").getPath().replaceFirst("/", "").replace("/BOOT-INF/classes","/");
        path += "public/";
        File isfile = new File(path);
        if (!isfile.exists()){
            isfile.mkdir();
        }
        System.out.println(path);
        // 获取文件名
        String originalFilename = file.getOriginalFilename();
        String filename = formateDate(new Date()) + originalFilename;
        path += filename;
        System.out.println("上传文件路径：" + path);
        try {
            File file1 = new File(path);
            file.transferTo(file1);//将文件以file1的路径存放到服务器本地
        } catch (Exception e) {
            e.printStackTrace();
        }
        // 返回的信息为json类型。
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("code", 0);
        jsonObject.put("msg", "");
        jsonObject.put("data", filename); //data存储服务器 上传的文件名
        return jsonObject;
    }

    private String formateDate(Date date){
        SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmssSSS");
        return format.format(date);
    }