Layui结合SpringBoot上传图片Demo

作者: HeloWxl | 来源:发表于2019-11-08 11:22 被阅读0次

Layui结合SpringBoot上传图片Demo
springboot结合layUI实现文件上传
Layui-文件上传与图片上传
laravel layui.layedit 富文本图片上传至七牛
laravel+WeAdmin(layui)使用js实现图片上传
layui table结合vue实现行新增删除修改
KongQi Laravel admin2.0 layui ad
05. 上传头像
layui 上传图片移动端调用相机
layui - 上传图片未触发上传操作

简单说明一下，This is a Demo，只涉及Controller层，可能有的人是是叫做Web层，反正没关系，作用都是一样的，只不过是名字不同而已。按照道理来说，逻辑性的代码是不应该写在controller层的。我就是想偷点懒，不想写service层，望谅解。前端界面的话，自己不想写，就借助了一下layui的前端样式。

开始准备

1.SpringBoot框架
2.Layui前端框架
3.IDEA开发工具

话不多说，咋们开始。

1.Contoller层

@Controller
@RequestMapping("uploadApi")
public class UploadController {

  //跳转到图片上传界面
  @GetMapping("/toUploadImage")
  public String toUploadImage() {
    return "uploadDemo/uploadImage";
  }

//图片上传接口
  @PostMapping("/uploadImage")
  @ResponseBody
  public Map<String,Object> uploadImage(@RequestParam("file") MultipartFile file) {
    Map<String,Object> map  = new HashMap<>();
    String uploadDir = "F:/kdgc_project/Student_Attendence_Application/src/main/webapp/resources/upload/";
    try {
      // 图片路径
      String imgUrl = null;
      //上传
      String filename = UploadUtils.upload(file, uploadDir, file.getOriginalFilename());
      if (filename != null) {
        imgUrl = new File(uploadDir).getName() + "/" + filename;
      }
      map.put("code",0);
      map.put("msg","");
      map.put("data",imgUrl);
      return map;
    } catch (Exception e) {
      e.printStackTrace();
      map.put("code",500);
      map.put("msg","上传失败");
      map.put("data",null);
      return map;
    }
  }
}

2.上传工具类

public class UploadUtils {
  public static String upload(MultipartFile file, String path, String fileName) throws Exception {
    // 生成新的文件名
    String realPath = path + "/" + UUID.randomUUID().toString().replace("-", "") + fileName.substring(fileName.lastIndexOf("."));
    File dest = new File(realPath);
    // 判断文件父目录是否存在
    if (!dest.getParentFile().exists()) {
      dest.getParentFile().mkdir();
    }
    // 保存文件
    file.transferTo(dest);
    return dest.getName();
  }
}

3.前端界面

3.1 选择完图片，自动上传

3.1.1前端界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>图片上传demo</title>
    <link href="${ctx}/resources/plugins/layui/css/layui.css" rel="stylesheet">
    <link rel="icon" href="${ctx}/resources/ico/logo.ico" type=”image/x-icon”>
    <script>
      var ctx = '${ctx}'
    </script>
    <style>
        #demo1{
            width:200px;
            height: 200px;
        }
        .grid-demo{
            background-color: #08acee;
        }
    </style>
</head>

  <div class="layui-upload" style="text-align: center">
               上传图片Demo01
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
                <button type="button" class="layui-btn" id="test1">上传图片</button>
            </div>
</body>
<%--引入js文件--%>
<script src="${ctx}/resources/js/jquery-2.1.4.js" type="application/javascript"></script>
<script src="${ctx}/resources/plugins/layui/layui.js" type="application/javascript"></script>
//<script>编写前端js代码</script>

3.1.2 前端JS

注意
需要引入layui的upload.

  layui.use('upload', function() {
    var $ = layui.jquery
        , upload = layui.upload;
})

//普通图片上传
     upload.render({
       elem: '#test1'
      ,url: ctx+'/uploadApi/uploadImage'
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo1').attr('src', result); //图片链接（base64）
        });
      }
      ,done: function(res){
        //如果上传失败
        if(res.code > 0){
          return layer.msg('上传失败',{icon:5,time:1500});
        }else{
          return layer.msg('上传成功',{icon:1,time:1500});
        }

      }
      ,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();
        });
      }
    });

3.1.3测试

选择完图片后，自动上传.png

上传完后的图片位置.png

3.2 选择完文件后，不上传

有的时候，我们想选择完图片后，暂时先不上传，那我们可以这做。

关键的两个参数： auto: false ,bindAction: '#startUpload'

3.2.1 前端界面

注：前端界面我只截取了关键代码

<div class="grid-demo">
            <div class="layui-upload" style="text-align: center">
                上传图片Demo02
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" id="selectADocument">选择文件</button>
                <button type="button" class="layui-btn" id="startUpload">开始上传</button>
            </div>

        </div>

3.2.2 前端JS

//选完文件后不自动上传
    upload.render({
      elem: '#selectADocument'
      ,url:  ctx+'/uploadApi/uploadImage'
      ,auto: false
      ,bindAction: '#startUpload'
      // 选择完文件后，回调
      ,choose: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo1').attr('src', result); //图片链接（base64）
        });
      }
      ,done: function(res){
        //如果上传失败
        if(res.code > 0 ){
          return layer.msg('上传失败',{icon:5,time:1500});
        }else{
          return layer.msg('上传成功',{icon:1,time:1500});

        }
      }
    });