42.0、springboot-springboot 整合 layui 实现图片上传

澜色海湾

已于 2022-05-13 21:12:17 修改

阅读量759

点赞数

分类专栏： springboot学习总结文章标签： springboot 图片上传 layui整合

于 2022-05-11 21:05:14 首次发布

本文链接：https://blog.csdn.net/m0_52433668/article/details/124718331

版权

springboot学习总结专栏收录该内容

37 篇文章 3 订阅

订阅专栏

42.0、springboot-springboot 整合 layui 实现图片上传

导入以下pom依赖：

<!--springboot启动类-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
<!--lombok-->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
    </dependency>
<!--thymeleaf-->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf-spring5</artifactId>
    </dependency>
    <dependency>
        <groupId>org.thymeleaf.extras</groupId>
        <artifactId>thymeleaf-extras-java8time</artifactId>
    </dependency>
<!--layui-->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>layui</artifactId>
        <version>2.5.7</version>
    </dependency>

第一步：创建一个springboot项目，首先来写一个文件上传的工具类 UploadUtils.java

package com.hkl.util;

import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

//写一个上传的工具类
public class UploadUtils {
    //定义一个目标路径，就是我们要把图片上传到的位置
    private static final String BASE_PATH="D:\\springproject\\demo\\springboot-project-001\\fileupload-project\\src\\main\\resources\\static\\image\\";

    //定义一个图片回显的路径
    private static final String SERVER_PATH="http://localhost:8080/image/";

    public static String upload(MultipartFile file) {
        //获得上传文件的名称
        String filename = file.getOriginalFilename();
        //为了保证图片在服务器中名字的唯一性，这个是我呢要用UUID来对filename进行改写
        String uuid = UUID.randomUUID().toString().replace("_","");
        //将生成的UIDD和filename进行拼接
        String newFilename = uuid+"_"+filename;
        //创建一个文件实例对象
        File image = new File(BASE_PATH, newFilename);
        //对这个文件进行上传操作
        try {
            file.transferTo(image);
        } catch (IOException e) {
            return null;
        }
        System.out.println(SERVER_PATH+newFilename);
        return SERVER_PATH+newFilename;
    }

}

第二步：写一个pojo实体类 DataJson.java

package com.hkl.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Map;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class DataJson {
    private Integer code;
    private String msg;
    private Map<String,String> data;
}

这里从layui的文档中可以知道回调函数中有三个字段，分别是：code、msg、data 所以在实体类中定义

第三步：写一个controller控制器，UploadController.java

package com.hkl.controller;

import com.hkl.entity.DataJson;
import com.hkl.util.UploadUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import java.util.HashMap;

//用于上传
@Controller
@RequestMapping("/upload")
public class UploadController {

    @RequestMapping("/image")
    @ResponseBody
    public DataJson uploadImage(@RequestParam(value = "file") MultipartFile file) {
        //调用我们写的上传文件的工具类
        String imagePath = UploadUtils.upload(file);//获得图片路径
        DataJson dataJson = new DataJson();
        if(imagePath!=null) {
            dataJson.setCode(1);
            dataJson.setMsg("上传成功");
            HashMap<String,String> map = new HashMap<>();
            map.put("src",imagePath);
            dataJson.setData(map);
        }else {
            dataJson.setCode(0);
            dataJson.setMsg("对不起，上传失败");
        }
        return dataJson;
    }

}

第四步：创建一个/templates/index.html 文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
    <script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>

    <style>
        body {
            background-color: rgb(250,250,250);
        }
        header {
            text-align: center;
            padding: 30px 0;
            font-family: 新宋体;
            font-size: 50px;
        }
        .layui-container {
            background-color: whitesmoke;
            padding: 20px;
        }
    </style>

</head>
<body>

<header>
    基于layui的图片上传并回显的功能
</header>

<article>
    <div class="layui-container">
        <div class="layui-row">
            <form class="layui-form" action="">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">图片描述</label>
                    <div class="layui-input-block">
                        <textarea name="imageDescription" placeholder="请输入图片的描述" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">上传图片</label>
                    <div class="layui-form-label">
                        <button type="button" class="layui-btn" id="upload-button">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">图片预览</label>
                    <div class="layui-input-block">
                        <img src="/image/4b0b732e-65f6-42aa-a148-3e59d42011b3_b%E6%B7%B1%E8%93%9D%E4%B9%8B%E6%B5%B7%E9%B8%A3%E4%BA%BA.jpg" id="image" alt="" style="width: 300px;height: 300px;">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</article>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    layui.use('upload', function(){
        var upload = layui.upload;
        //获得layui里的jquery
        var $ = layui.$;

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload-button' //绑定元素
            ,url: '/upload/image' //上传接口
            ,done: function(res){
                if(res.code == 1) {
                    //成功
                    layer.msg(res.msg);
                    //首先我们要获得我们上传之后的图片的访问路径
                    var imagePath = res.data.src;
                    $("#image").attr("src",imagePath)
                }else {
                    //失败了
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

</script>
</body>
</html>

项目结构如下：