layui+SpringBoot上传图片到数据库并展示在页面（前端）

最新推荐文章于 2024-05-25 22:39:08 发布

2021619

最新推荐文章于 2024-05-25 22:39:08 发布

阅读量1.5k

点赞数

文章标签：前端 layui spring boot

本文链接：https://blog.csdn.net/JIAYOUXUEHAOC/article/details/127554718

版权

1、设置前端样式

<div class="layuimini-main">
    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label">打卡时间</label>
            <div class="layui-input-block" style="width: 400px">
                <input type="text" name="pushTime" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">是否隔离</label>
            <div class="layui-input-block" style="width: 400px">
                <input type="text" name="iso" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">是否咳嗽</label>
            <div class="layui-input-block" style="width: 400px">
                <input type="text" name="cough" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">是否发烧</label>
            <div class="layui-input-block" style="width: 400px">
                <input type="text" name="fever" class="layui-input">
<!--                lay-verify="required"-->
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">行程码</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload_route">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <div class="layui-hide" id="uploadDemoView_route">
                    <hr>
                    <img src="" alt="上传成功后渲染" style="max-width: 196px">
                </div>
            </div>
            <input type="hidden" id="trip" name="trip" value="">
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">健康码</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload_health">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <div class="layui-hide" id="uploadDemoView_health">
                    <hr>
                    <img src="" alt="上传成功后渲染" style="max-width: 196px">
                </div>
            </div>
            <input type="hidden" id="health" name="health" value="">
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">当前位置</label>
            <div class="layui-input-block">
                <div id="get_location" onclick="baiduMapIp()" class="layui-btn" >
                    点击获取位置
                </div>
            </div>
            <input type="hidden" id="location" name="location" value="">
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>-->
<!-- 百度API -->
<script src="https://api.map.baidu.com/api?v=2.0&ak=YhgdX9V4DTAIepL8XHcMFkVYEvd4zzkv"></script>
<script>
    layui.use('upload', function(){
        let upload_route = layui.upload;
        let upload_health = layui.upload;
        //执行实例
        let uploadInst = upload_route.render({
            elem: '#upload_route',//绑定元素
            url: 'health/routeUpload',//上传图片接口，并把图片存入文件夹中
            field:'file',
            done: function(res){
                //上传完毕回调
                layer.msg("上传成功");
                console.log(res.msg);//图片地址
                layui.$('#uploadDemoView_route').removeClass('layui-hide').find('img').attr('src', res.msg);
                //塞入到input
                //let image_route = "G:/firstDate"+res.msg;
                $("#trip").val(res.msg);//将图片的地址值保存到id为trip的value值中，向数据库传入的数据
            },
            error: function(){
                //请求异常回调
            }
        });
        let uploadInst2 = upload_health.render({
            elem: '#upload_health',//绑定元素
            url: 'health/healthUpload',//上传接口
            field:'file',
            done: function(res){
                //上传完毕回调
                layer.msg("上传成功");
                console.log(res.msg);//图片地址
                layui.$('#uploadDemoView_health').removeClass('layui-hide').find('img').attr('src', res.msg);
                //塞入到input
                //let image_health = "G:/firstDate"+res.msg;
                $("#health").val(res.msg);
            },
            error: function(){
                //请求异常回调
            }
        });
    });
    layui.use(['form', 'table', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            laydate = layui.laydate;
        $ = layui.$;
        //日期
        laydate.render({
            elem: '#date'
        });
         //初始化表单，要加上，不然刷新部分组件可能会不加载
        form.render();
        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var data=data.field;
            debugger;
            //console.log("输出data:"+data);
            $.ajax({
                url:'health/addHealth',
                type:"post",
                contentType:"application/json",
                data:JSON.stringify(data),
                success:function(res){
                    //console.log("输出res:"+res.data);
                    if(res.code==200){
                        layer.msg("请假填写成功");
                        window.reload();
                        parent.layer.close(parentIndex);
                    }else{
                        layer.msg("填写失败");
                    }
                }
            });
            return false;
        });
    });
    // 根据百度地图浏览器定位GPS获取当前定位
    // let geolocation = new BMap.Geolocation();
    // geolocation.getCurrentPosition(function (res) {
    //     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //         console.log("GPS定位nnn");
    //         let city=res.address.city;
    //         let province =res.address.province;
    //         city=city.split("市")[0];
    //         if(province.indexOf("省")!=-1){
    //             province=province.split("省")[0];
    //         }else{
    //             province=province.split("市")[0];
    //         }
    //         console.log(city+","+province);
    //         // areaMap(province,city);
    //
    //     }
    //     else {
    //         // 如果GPS定位失败，则使用当前用户的IP确定所在地
    //         console.log("Gps定位失败");
    //         baiduMapIp(returnCitySN['cip']);
    //         console.log("IP定位");
    //         console.log('failed' + this.getStatus());
    //     }
    // }, {enableHighAccuracy: true,timeout:1500});

    // 调用百度API(根据IP来获取当前位置)
    function baiduMapIp(ip){
        $.ajax({
            url:"https://api.map.baidu.com/location/ip",
            type:"get",
            data:{ak:'YhgdX9V4DTAIepL8XHcMFkVYEvd4zzkv',ip:ip,coor:"bd0911"},
            dataType:"jsonp",
            success:(res)=>{
                console.log(res);
                let city=res.content.address_detail.city;
                let province =res.content.address_detail.province;
                city=city.split("市")[0];
                if(province.indexOf("省")!=-1){
                    province=province.split("省")[0];
                }else{
                    province=province.split("市")[0];
                }
                console.log(city+","+province);
                document.getElementById("get_location").innerText=(province+","+city);
                //塞入到input
                $("#location").val(city+","+province);//动态对页面赋值
            }
        });
    }
</script>

1、上传图片样式代码

<div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">行程码</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload_route">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <div class="layui-hide" id="uploadDemoView_route">
                    <hr>
                    <img src="" alt="上传成功后渲染" style="max-width: 196px">
                </div>
            </div>
            <input type="hidden" id="trip" name="trip" value="">
        </div>

2、对应js

layui.use('upload', function(){
        let upload_route = layui.upload;
        //执行实例
        let uploadInst = upload_route.render({
            elem: '#upload_route',//绑定元素
            url: 'health/routeUpload',//上传图片接口，并把图片存入文件夹中
            field:'file',
            done: function(res){
                //上传完毕回调
                layer.msg("上传成功");
                console.log(res.msg);//图片地址
                layui.$('#uploadDemoView_route').removeClass('layui-hide').find('img').attr('src', res.msg);
                //塞入到input
                //let image_route = "G:/firstDate"+res.msg;
                $("#trip").val(res.msg);//将图片的地址值保存到id为trip的value值中，向数据库传入的数据
            },
            error: function(){
                //请求异常回调
            }
        });

3、后端展示图片代码

@RequestMapping("routeUpload")
    public R RouteUpload(@RequestParam(value = "file") MultipartFile file){
        if(file.isEmpty()){
            System.out.println("图片不存在");
        }
        //获取文件名称
        String fileName= file.getOriginalFilename();
        //获取文件后缀
        String suffixName=fileName.substring(fileName.lastIndexOf("."));
        //随机生成一个文件名
        fileName= UUID.randomUUID()+suffixName;
        //设置上传文件的路径
        String filePath="//G://firstDate//images//";
        //上传
        File dest=new File(filePath,fileName);
        //判断文件路径是否存在，如果不存在 创建
        if(!dest.getParentFile().exists()){
            dest.getParentFile().mkdirs();
        }
        try {
            file.transferTo(dest);
        }catch (Exception e){
            System.out.println("上传出错");
        }
        //设置最终的文件名称信息返回前端
        String fileName2="/images/"+fileName;
        return R.ok(fileName2,null);
    }

特别注意的是，因为我们的图片保存在本地，浏览器访问的时候是不可以直接访问的，所以我们需要配置一个虚拟路径

@Configuration
public class MyConfig implements WebMvcConfigurer {
	/*
	*addResourceHandler:访问映射路径
	*addResourceLocations:资源绝对路径
	*/
	@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**").addResourceLocations("file:G:/firstDate/images/");
        //addResourceLocations("file:G:/firstDate/images/"):自己本地存图片的地址
		//addResourceHandler("/images/**"):因为浏览器不可以访问本地地址而设置的虚拟的地址
    }
}

我写的乱七八糟的不知道能不能看懂，看不懂的我们可以一起讨论