记录一次springboot+layui图片上传

 

1.application.properties文件默认，可以用不用配置。

2.启动类自动生成。

3.编写UploadFileController类

package com.shenk.controller;

import java.io.File;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.shenk.common.Constant;
import com.shenk.common.ResultReturn;
import com.shenk.common.ResultReturnUtil;

@Controller
public class UploadFileController {
	@RequestMapping("/upload")
	public String upload() {
		return "upload";
	}
    @RequestMapping("/uploadFile")
    @ResponseBody
    public ResultReturn uploadFile(MultipartFile file, HttpServletRequest request) {
        String filePath = "D:/upload/";//上传到这个文件夹
        File file1 = new File(filePath);
        if (!file1.exists()) {
            file1.mkdirs();
        }
        String finalFilePath = filePath + file.getOriginalFilename().trim();
        File desFile = new File(finalFilePath);
        if (desFile.exists()) {
            desFile.delete();
        }
        try {
            file.transferTo(desFile);
            return ResultReturnUtil.success(Constant.UPLOAD_SUCCESS);
        } catch (Exception e) {
            System.out.println(e.getMessage());
            return ResultReturnUtil.fail(Constant.UPLOAD_FAIL);
        }
    }
}

4.编写MyWebStaticConfig类

package com.shenk.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 	静态资源映射
 * @author Administrator
 *
 */
@Configuration
public class MyWebStaticConfig implements WebMvcConfigurer {

	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		String pathPatterns = "/pictures/**";
        String pathAbsolute= "file:D:/upload/";
        //addResoureHandler：指的是对外暴露的访问路径
        //addResourceLocations：指的是内部文件放置的目录
        //通过设置spring.resources.static-locations自定义Spring boot加载前端静态资源路径
//        如果指定了拦截器，该属性有可能失效
//        需要在拦截器ResourceHandlerRegistry中通过addLocations()指定对应路径

        registry.addResourceHandler(pathPatterns).addResourceLocations(pathAbsolute);
	}

}

5.编写Constant类

package com.shenk.common;

public class Constant {
 
//  数据上传成功返回信息
    public static final String UPLOAD_SUCCESS = "文件上传成功!";
 
//	数据上传失败返回信息
    public static final String UPLOAD_FAIL = "文件上传失败";
 
}

6.编写ResultReturn类

package com.shenk.common;

import java.io.Serializable;

public class ResultReturn implements Serializable {
 
    private static final long serialVersionUID = 5805792987639183304L;
    /**
     * 0成功  -1失败
     */
    private String code;
 
    private String msg;
 
    private Object data;
 
    
 
    public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}

	public Object getData() {
		return data;
	}

	public void setData(Object data) {
		this.data = data;
	}

	public ResultReturn(){
        super();
    }
 
    public ResultReturn(String code, String msg){
        this.code = code;
        this.msg = msg;
    }
 
    public ResultReturn(String code, String msg, Object data){
        this.code = code;
        this.msg = msg;
        this.data = data;
    }
}

7.编写ResultReturnUtil类

package com.shenk.common;

public class ResultReturnUtil {
 
    /**
     *	 成功 返回自定义提示信息
     * @param msg
     * @return
     */
    public static ResultReturn success(String msg){
        return new ResultReturn("0",msg);
    }
 
    /**
     * 	成功  返回自定义码和提示消息
     * @param code
     * @param msg
     * @return
     */
    public static ResultReturn success(String code, String msg){
        return new ResultReturn(code,msg);
    }
    /**
     * 	成功 返回自定义提示信息和数据
     * @param msg
     * @param data
     * @return
     */
    public static ResultReturn success(String msg, Object data){
        return  new ResultReturn("0",msg,data);
    }
    /**
     * 	失败 返回自定义提示信息
     * @param msg
     * @return
     */
    public static ResultReturn fail(String msg){
        return new ResultReturn("-1",msg);
    }
    /**
     * 	失败 返回自定义码和提示信息
     * @param code
     * @param msg
     * @return
     */
    public static ResultReturn fail(String code, String msg){
        return new ResultReturn(code,msg);
    }
}

8.编写upload页面。页面需要引入layui的相关包。

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>上传</title>
<link rel="stylesheet" href="/layui/css/layui.css" />
<script src="/layui/layui.js" charset="utf-8"></script>
</head>
<body>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1"><i class="layui-icon">&#xe67c;</i>选择文件</button>
        <button type="button" class="layui-btn" id="test9">开始上传</button>
        <div id="appenDemo"></div>
        <div id="demoText"></div>     
        <div>
            <img th:src="@{/pictures/}+展示2.png" style="height: 240px;">
        </div>
    </div>
    
    <script>
    layui.use('upload', function(){
          var $ = layui.jquery
          ,upload = layui.upload;
          
          //普通图片上传
          var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'uploadFile' //改成自己的上传接口
            ,auto: false//不自动上传
            ,bindAction: '#test9'
            ,choose: function (obj) {
               //将每次选择的文件追加到文件队列
                var files = obj.pushFile();
               //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {
                	$('#appenDemo').empty();
                    $('#fileName').val(file.name);  //展示文件名
                    $('#appenDemo').append('<div class="image-container" id="container'+index+'"><div><button id="upload_img_'+index+'" class="layui-btn layui-btn-danger layui-btn-xs">删除</button></div>' +
                                '<img id="showImg'+index+'" style="width: 150px;cursor:pointer;"src="' + result + '" alt="' + file.name + '"></div>');
	                //删除某图片
	                $("#upload_img_" + index).bind('click', function () {
	                    delete files[index];
	                    $("#container"+index).remove();
	                    $('#appenDemo').empty();
	                });
	                //图片放大预览
	                $("#showImg"+index).bind('click',function () {
	                    var width = $("#showImg"+index).width();
	                    var height = $("#showImg"+index).height();
	                    var scaleWH = width/height;
	                    var bigH = 600;
	                    var bigW = scaleWH*bigH;
	                    if(bigW>900){
	                        bigW = 900;
	                        bigH = bigW/scaleWH;
	                    }
	                    layer.open({
	                        type: 1,
	                        title: false,
	                        closeBtn: 1,
	                        shadeClose: true,
	                        area: [bigW + 'px', bigH + 'px'], //宽高
	                        content: "<img width='"+bigW+"' height='"+bigH+"' src=" + result + " />"
	                    });
	                });
                })
            }
            ,done: function(res){
              //如果上传失败
              if(res.code < 0){
                return layer.msg(res.msg);
              } else{
                  $('#appenDemo').empty();
                  $('#demoText').empty();
                  return layer.msg(res.msg);
              }
              //上传成功
            }
            ,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>
</body>
</html>