LayUI Java 上传图片功能

最新推荐文章于 2024-09-05 17:05:13 发布

众纳

最新推荐文章于 2024-09-05 17:05:13 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44690195/article/details/108648098

版权

Spring boot 同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

Java Web

17 篇文章 0 订阅

订阅专栏

    众所周知，CS 程序之所以干不过BS程序最大的原因就是不能或者很难实现一个文本编辑并且前台显示，当然可以通过第三方插件实现，这样就会有程序文件大、占内存、加载慢等问题。（在这里不是说CS一无是处，比如CS在数据处理方面还是非常快的，安全性相对更高等等）
    需求：我们做商品管理时，需要上传商品主图；将来我们需要把上传成功后的路径传存到数据库中，方便用到时调用并显示。
    前端：LayUI 框架  
    插件：thymeleaf

前端

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <script th:src="@{layui/layui.js}"  charset="utf-8" type="text/javascript"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-upload">

    <textarea id="demo" style="display: none;"></textarea>
    <script>
        layui.use('layedit', function(){
            var layedit = layui.layedit;
            layedit.set({
                uploadImage: {
                    url: '/uploadFile' //接口url
                    ,type: 'POST' //默认post
                }
            });
            layedit.build('demo'); //建立编辑器
        });
    </script>


    <button type="button" class="layui-btn" id="test1">选择图片</button>
    <div class="layui-upload-list">
        <img style="width: 400px;height:auto" id="demo1">
    </div>
</div>

<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/uploadFile'
            ,auto: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    layer.msg('上传失败');
                }
                //上传成功
                layer.msg('上传成功');
            }
        });
    });
</script>

</body>
</html>

JAVA 代码

package com.example.Controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
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.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;


@RestController
public class UploadFile {

    @ResponseBody
    @RequestMapping("/uploadFile")
    public JSON uploadFile(MultipartFile file, HttpServletRequest request) {
        JSONObject json=new JSONObject();

        String filePath = System.getProperty("user.dir")+"/src/main/resources/static/uploadFile/";//上传到这个文件夹
        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);
            json.put("code",0);
            json.put("msg","ok");

            JSONObject json2=new JSONObject();
            json2.put("src",finalFilePath);
            json2.put("title","");
            json.put("Data",json2);

        } catch (Exception e) {
            System.out.println(e.getMessage());
            json.put("code",1);
        }
        System.out.println(json);
        return json;
    }
}