springboot 实现图片上传，包含其他元素

最新推荐文章于 2023-11-23 01:23:39 发布
最新推荐文章于 2023-11-23 01:23:39 发布
阅读量300 收藏 1
点赞数 1
分类专栏： spring boot html 文章标签： spring boot html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44575964/article/details/118784431
版权

数据库字段：
tb_goodsdetial:
在这里插入图片描述
在这里插入图片描述

Controller:

//商家增加商品--》待审核状态、待上架
@PostMapping("/goodsAdd")
@ResponseBody
public JsonResult insertGood(TbGoodsdetail goodsDetail, MultipartFile gPicture1,String goodsTypeName,HttpSession session) throws FileNotFoundException {
    JsonResult result = goodsDetailService.insertGood(goodsDetail, gPicture1,goodsTypeName,session);
    return result;
}

Mapper:

 //商家新增货物
    Integer insertGood(TbGoodsdetail tbGoodsdetail);

<!--商家新增货物-->
<insert id="insertGood" parameterType="TbGoodsdetail">
    insert into tb_goodsdetail(goodsId,gName,gNowPrice,gOldPrice,gSizeMsg
                ,gPicture,number,uid,goodsTypeId,gscore,isPass,isHot,state)
    values(null,#{gName},#{gNowPrice},0,#{gSizeMsg},#{gPicture},
            #{number},#{uid},#{goodsTypeId},0,2,0,2)
</insert>

Service:

//商家新增商品
    JsonResult insertGood(TbGoodsdetail tbGoodsdetail,MultipartFile gPicture, String goodsTypeName,HttpSession session) throws FileNotFoundException;

ServiceImpl:


//商家新增商品
    @Override
    public JsonResult insertGood(TbGoodsdetail goodsDetail, MultipartFile gPicture,String goodsTypeName,HttpSession session) throws FileNotFoundException {
        if(gPicture==null){
            return new JsonResult(201,"请上传图片！");
        }
        //获取文件的大小
        if(gPicture.getSize()>1024*1024*50){
            return new JsonResult(202,"请上传小于50MB的图片");
        }
        //获取上传的文件名
        String filename = gPicture.getOriginalFilename();
        //获取文件后缀
        int index = filename.lastIndexOf(".");
        String sub = filename.substring(index + 1, filename.length());
        if(!sub.equals("jpg")&&!sub.equals("png")&&!sub.equals("bmp")){
            return new JsonResult(203,"请上传jpg或png或bmp类型文件！");
        }
        String suffix = filename.substring(index);
        //文件名不能重复，故用当前系统时间毫秒值+文件名来区分
        long time = System.currentTimeMillis();
        String newFileName = time +suffix;//long类型+字符串类型自动变为字符串类型
        //要上传的位置
        String staticPath = ResourceUtils.getURL("classpath:static").getPath().replace('/', '\\');
        System.out.println(staticPath);
        String path=staticPath+"\\"+"upload";
        System.out.println(path);
        File file1=new File(path);
        if (!file1.exists()){
            file1.mkdirs();
        }
        String filePath = path+File.separator+newFileName;
        System.out.println("filePath------"+filePath);
        //判断目录下的文件是否存在,使用file对象来描述文件路径
        File file2 = new File(filePath);
        //上传文件
        try {
            gPicture.transferTo(file2);
            Integer uid = 2;//(Integer) session.getAttribute("uid");
            if(uid==null){
                return new JsonResult(206,"会话失效，请重新登录！");
            }
            goodsDetail.setUid(uid);

        } catch (IOException e) {
            e.printStackTrace();
            return new JsonResult(204,"头像上传失败！");
        }

        goodsDetail.setGPicture(newFileName);
        Integer goodsTypeId = goodsDetailMapper.findTypeIdByName(goodsTypeName);
        goodsDetail.setGoodsTypeId(goodsTypeId);
        Integer integer = goodsDetailMapper.insertGood(goodsDetail);
        if(integer!=1){
            return new JsonResult(205,"新增失败！");
        }
        return  new JsonResult(200,"新增成功，等待审核！");
    }

Html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

                        <head>
                            <base th:href="@{/}">
                            <meta charset="utf-8">
                            <title>
                                修改商品信息
                            </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">
                            <meta name="apple-mobile-web-app-status-bar-style" content="black">
                            <meta name="apple-mobile-web-app-capable" content="yes">
                            <meta name="format-detection" content="telephone=no">

                            <link rel="stylesheet" href="./css/font.css">
                            <link rel="stylesheet" href="./css/index.css">
                            <script src="./lib/layui/layui.js" charset="utf-8"></script>
                            <script type="text/javascript" src="./js/index.js"></script>
                            <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>

                        </head>
                        <body>

                        <div class="layui-card">
                            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                                <div class="layui-tab-content" >
                                    <div class="layui-tab-item layui-show"  >
                                        <form class="layui-form layui-form-pane">  <!--th:action="@{/goodUpdate}-->
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">
                                                    <span class='x-red'>*</span>商品名称
                                                </label>
                                                <div class="layui-input-block">
                                                    <!--readonly="readonly"只读，不可修改-->
                                                    <input type="text"  th:value="${good.getGName()}" th:name="gName" th:id="gName" autocomplete="off" placeholder="请输入商品规格"
                                                           class="layui-input" lay-verify="required">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">
                                                    <span class='x-red'>*</span>商品类型
                                                </label>
                                                <div class="layui-input-block">
                                                    <select th:name="goodsTypeName" th:id="goodsTypeName">
                                                        <option th:selected="selected" th:text="${good.goodstype.goodsTypeName}"
                                                                th:value="${good.goodstype.goodsTypeName}" th:title="原商品类型">
                                                        </option>
                                                        <option th:each="goodsTypeList:${allGoodsType}"
                                                                th:value="${goodsTypeList.getGoodsTypeName()}"
                                                                th:text="${goodsTypeList.getGoodsTypeName()}">
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">
                                                    <span class='x-red'>*</span>价格
                                                </label>
                                                <div class="layui-input-block">
                                                    <input type="text" th:name="gNowPrice" th:id="gNowPrice" th:value="${good.getGNowPrice()}" autocomplete="off" placeholder="请输入商品现价"
                                                           class="layui-input" lay-verify="number">
                                                </div>
                                            </div>
                                            <!--               <div class="layui-form-item">
                                                               <label class="layui-form-label">
                                                                   <span class='x-red'>*</span>原价
                                                               </label>
                                                               <div class="layui-input-block">
                                                                   <input type="text" th:name="gOldPrice" th:id="gOldPrice" th:value="${good.getGOldPrice()}" autocomplete="off" placeholder="请输入商品原价"
                                                                          class="layui-input" lay-verify="number">
                                                               </div>
                                                           </div>-->
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">
                                                    <span class='x-red'>*</span>商品规格
                                                </label>
                                                <div class="layui-input-block">
                                                    <input type="text" th:name="gSizeMsg" th:id="gSizeMsg" th:value="${good.getGSizeMsg()}" autocomplete="off" placeholder="请输入商品规格"
                                                           class="layui-input" lay-verify="required">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">
                                                    <span class='x-red'>*</span>库存
                                                </label>
                                                <div class="layui-input-block">
                                                    <input type="text" th:name="number" th:id="number" th:value="${good.getNumber()}" autocomplete="off" placeholder="请输入商品库存"
                                                           class="layui-input" lay-verify="number">
                                                </div>
                                            </div>

                                            <div class="layui-form-item">
                                                <label  class="layui-form-label">
                                                    <span class="x-red">*</span>商品缩略图
                                                </label>
                                                <div class="layui-input-inline">
                                                    <div class="site-demo-upbar">
                                                        <input type="file"  name="gPicture" id="gPicture"/>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="layui-form-item imgs" id="imgshow">
                                                <label  class="layui-form-label">商品缩略图展示
                                                </label>
                                                <img th:src="@{/upload/{id}(id=${good.getGPicture()})}" id="pimages" name="pimages" style="width: 400px;height: 200px;"/>
                                            </div>

                                            <br>
                                            <div class="layui-form-item" style="text-align: center;">
                                                <button th:type="button" class="layui-btn"  lay-filter="*" id="btn">保存
                                                </button>
                                            </div>
                    </form>
                    <div style="height:100px;"></div>
                </div>

              </div>
            </div> 
        </div>

        <script>
            //页面加载完成后
            $(function () {
                var file=document.getElementById("gPicture");
                file.onchange=function () {
                    var img=document.createElement("img");
                    img.src=window.URL.createObjectURL(file.files[0])
                    img.onload=function(){
                        window.URL.revokeObjectURL(this.src)
                    }
                    var newSrc=img.src;
                    $("#pimages").attr("src",newSrc);
                }
            });

            layui.use(['element','layer','form'], function(){
                $ = layui.jquery;//jquery
               lement = layui.element();//面包导航
              layer = layui.layer;//弹出层
              form = layui.form()
                okLoading.close($);
              })


            $("#gName").blur(function () {
                var gName = $("#gName").val();
                if(gName==null||gName==""){
                    layer.msg("商品名称不能为空！",{icon:2,time:1000});
                    return;
                }
            });
            $("#goodsTypeName").blur(function () {
                var goodsTypeName = $("#goodsTypeName").val();
                if(goodsTypeName==null||goodsTypeName==""){
                    layer.msg("请选择商品类型！",{icon:2,time:1000});
                    return;
                }
            });
            $("#gNowPrice").blur(function () {
                var gNowPrice = $("#gNowPrice").val();
                if(gNowPrice==null||gNowPrice==""){
                    layer.msg("请输入价格！",{icon:2,time:1000});
                    return;
                }
            });
            /*$("#gOldPrice").blur(function () {
                var gOldPrice = $("#gOldPrice").val();
                if(gOldPrice==null||gOldPrice==""){
                    layer.msg("请输入原价！",{icon:2,time:1000});
                    return;
                }
            });*/
            $("#gSizeMsg").blur(function () {
                var gSizeMsg = $("#gSizeMsg").val();
                if(gSizeMsg==null||gSizeMsg==""){
                    layer.msg("请商品规格！",{icon:2,time:1000});
                    return;
                }
            });
            $("#number").blur(function () {
                var number = $("#number").val();
                if(number==null||number==""){
                    layer.msg("请商品库存！",{icon:2,time:1000});
                    return;
                }
            });
            $("#btn").click(function () {
                //数据来源于表单,表单数据封装到data中
                var gName = $("#gName").val();
                var goodsTypeName = $("#goodsTypeName").val();
                var gSizeMsg = $("#gSizeMsg").val();
                var number = $("#number").val();
                var gNowPrice = $("#gNowPrice").val();
                var formData=new FormData();
                var file = document.getElementById('gPicture').files[0];
                formData.append("gName",gName);
                formData.append("goodsTypeName",goodsTypeName);
                formData.append("gSizeMsg",gSizeMsg);
                formData.append("number",number);
                formData.append("gNowPrice",gNowPrice);
                formData.append("gPicture1",file);
                if(data(gNowPrice)==false){
                    return;
                }
                if(data(number)==false){
                    return;
                }
                if(dataInt(number)==false){
                    return;
                }
                // var param={"gName":gName,"gNowPrice":gNowPrice,"number":number,"gSizeMsg":gSizeMsg,"gPicture1":gPicture,"goodsTypeName":goodsTypeName};
                $.ajax({
                    //前部分的双引号可要可不要
                    "url":"/goodUpdate",
                    "data":formData,//传给服务端的数据
                    "type":"POST",//请求类型
                    "contentType":false, //提交给服务端的数据类型是否当成字符串处理，false不当成字符串
                    "processData":false,//是否处理提交数据，false不处理
                    "dataType":"json",//服务端返回的数据类型
                    success:function (data) {//回调函数
                        if(data.state==200){
                            layer.msg(data.msg,{icon:1,time:1000});
                            location.href = "/findAllGoodsByUid";
                            //将图片路径显示到<img>的src属性
                            /*  $("#imgNew").attr("src","${pageContext.request.contextPath}/"+"upload/"+data.path);
                              $("#imgOld").attr("src","${pageContext.request.contextPath}/"+"upload/"+data.pa);*/
                            //将修改后文件名保存在cookie中
                            /*$.cookie("image",data.path,7);*/
                        }else{
                            layer.msg(data.msg,{icon:2,time:1000});
                        }
                    }
                })
            });
            

            function data(val) {
                //浮点型
                var regPos = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
                if(regPos.test(val)==false){
                    layer.msg("请输入数字！",{icon:2,time:1000});
                    return false;
                }
            }
            function dataInt(val) {
                //浮点型
                var regPos = /^\d+$/;
                if(regPos.test(val)==false){
                    layer.msg("库存请输入整数！",{icon:2,time:1000});
                    return false;
                }
            }

        </script>


    </body>
</html>
正义的琼
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
springboot添加方法中的图片上传
淡然的博客
08-26 504
@RequestMapping(value="/add") public void add(@RequestParam(value = “file”) MultipartFile file, HttpServletRequest request, HttpServletResponse response,@RequestParam(value = “projectName”)String proj...
springboot通过表单同时提交字段和上传文件
weixin_50158735的博客
04-16 3659
目录通过form表单同时提交字段和上传文件前端后端 通过form表单同时提交字段和上传文件 单独提交字段或者上传文件都比较简单，这里说一下如何同时提交被后端接收。 前端 字段设置： 通过input的name属性，和后端的类的field名字对应，使后端拿到该属性。 文件设置： 通过form表单集成的 for=“file” 或者 for=“files” 属性，上传单个或多个文件，这里同样需要制定name属性，和后端接收的名字一致。 注意的大坑：form表单里button调用的方法名，不能和button的id一
Spring Boot电商项目35：商品模块二：【增加商品】接口之图片上传：【上传图片】接口开发；（主要是：Spring项目中，上传文件的步骤、套路和需要注意的问题）
小枯林的博客
03-04 1960
说明： （1）为什么写本篇博客？：【在开发【增加商品】接口时，是需要上传图片的；】→【所以，增加商品时，需要先把图片上传到服务器；；服务器拿到这个图片后，会把图片的地址返回给前端】→【前端拿到图片地址后，在请求【增加商品】接口时，image参数就有的填了】； 所以，在开发【增加商品】接口的时候，必须要开发图片上传的功能；（PS：其实，对于其他需要上传文件的接口；情况不能说完全一样，大体上也是差不多的） （2）本篇博客的内容：开发上传图片接口； （3）关于文件上传，在【后台系统四：【新增】功能..
SpringBoot文件上传和回显（含数据库字段设置和背景图片设置）
拧发条鸟的博客
05-30 1050
SpringBoot文件上传和回显 思路 将上传的文件保存在服务器硬盘中，将文件路径保存在mysql数据库中。这样可以节省数据库的内存。 所以数据库中的字段为varchar。 对应实体类的属性为String。 1.准备条件 1.文件上传表单必备条件 method属性设置为post。 enctype属性设置为"multipart/form-data" 提供 文件上传输入框。 2.导入依赖 <dependency> <groupId>commons-fileupload
spring boot实现上传图片并在页面上显示
04-21
spring boot 图片上传并显示的小demo spring boot 的文件上传与 spring mvc 的文件上传基本一致，只需注意一些配置即可。
Springboot实现文件与额外信息同时上传
TARS_的博客
01-12 984
前端实现 前端同时提交extra的文本作为额外信息以及文件file <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>uploadTest</title> </head> <body> <h>文件上传</h> <form action="/upload" meth
springboot项目引入图片_SpringBoot实现上传图片功能
weixin_39935388的博客
12-19 779
1：首先在项目的pom文件中添加两个依赖commons-fileuploadcommons-fileupload1.3.1net.coobirdthumbnailator0.4.82：resource中添加 file-message.properties 配置文件file-message.properties.png配置文件内容如下#文件压缩大小(大于4兆压缩)message.fileSize=4...
springboot 上传图片
grow_的博客
06-05 2005
springboot上传图片
SpringBoot图片保存到本地，在数据库中存放图片地址，实现图片的添加和查找
最新发布
qq_53573029的博客
11-23 1230
最近感觉真的Java寒冬，工作也不好找，愿各位小伙伴都能找到自己心仪的工作（或者跳槽到自己喜欢的岗位和公司）。以上就是本章的内容，很高兴大家看完。后期项目回上传到gitee和github。具体思路：从数据库中读取图片名，然后拼接字符串，然后返回图片路径，实现图片展示；数据库保存文件名或者地址（因为使用了字符串拼接，我这里直接保存文件的文件名）maven由于一些是其他类使用的就没有删，多多担待。个人偷懒，大家可以用其他的，大致sql语句都差不多。都有用注释，大家不用担心。
【SpringBoot】@RequestBody的使用
锦瑟年华,逐梦之人
06-20 1万+
阅读目录基础知识介绍示例详细说明`@RequestBody`与前端传过来的`json`数据的匹配规则解析json数据大体流程概述全面的结论 提示: 建议一定要看后面的@RequestBody的核心逻辑源码以及六个重要结论！本文前半部分的内容都是一些基本知识常识，可选择性跳过。 声明：本文是基于SpringBoot，进行的演示说明。 基础知识介绍 @RequestBody主要用来接收前端传递给后端的json字符串中的数据(请求体中的数据的)；GET方式无请求体，所以使用@RequestBody接收数据时
SpringBoot 图片上传（详解篇）
FATCATS博客
07-31 1万+
前言：SpringBoot在服务器内上传文件，是临时文件，在重启时候会生成另外的目录，也就意味着原来上传的图片在重启后就访问不到了。 1.图片上传 @PostMapping("/upload") public CommonResult insertDbMsPhoto(@RequestPart("photos") MultipartFile[] photos, @RequestParam("mid") String mi
SpringBoot 三行代码实现图片上传和预览功能
热门推荐
xiaoguangtouqiang的博客
05-14 2万+
fff
SpringBoot实现图片上传功能
Jerry
12-25 3013
SpringBoot 实现图片上传功能 SpringBoot 是为了简化Spring应用的创建、运行、测试、调试、部署等一系列问题而诞生的产物，自动装配的特性让我们可以更好的关注业务本事而不是外部的xml配置，我们只需遵循规范，引入相关的依赖就可以轻易搭建出一个web工程 说明 文件上传控件较多，本文以引用LayUI图片上传控件为例 页面上传插件使用Layui的图片上传控件，点击跳转 ...
SpringBoot+vue修改商品信息遇到的问题，包含上传图片，和fromdata提交数据时枚举enum处理
wuxian_wj的博客
08-29 601
今天在写SpringBoot+vue修改商品信息的功能，遇到一些问题，问题可以说是一环套一环。 首先是上传图片，vue+springboot的上传图片并不是很复杂。 前端VUE： 先说前端，fromdata二进制形式传递选中图片至后端springboot,代码如下： <form role="form" enctype="multipart/form-data"> <input type="file" name="upload" id="goodsImg">
图片上传到服务器的正确姿势（springboot,对象含文件，多文件）
weixin_47062406的博客
05-31 1445
问题描述 做项目总少不了图片或者文件，那么我想这个类里存图片（文件）的url，可上传上来的是文件。那么应该如何做才是最好的方式呢？以下展示个人在springboot项目中是如何把图片上传到服务器的。 实操练习 项目主要依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId>
富文本编辑器
xiaolu_0的博客
10-02 550
1、富文本编辑 2、文件上传及优化
SpringBoot实现多字段多文件上传
Elvira_Sunset的博客
07-05 557
实现思路 一、创建2个实体类。 1、上传文件类UpLoadDetailPO,用来存放上传文件的基本信息，如主键，文件名称，文件路径，文件类型。 表2用于存放实体类+List
解决src引用upload下图片中文名称问题
SkyFire1121的博客
05-18 409
在jsp页面设置图片的src, $("#preview").attr("src","upload/QQ图片20150527085733.png"); 由于路径含有中文名，而找不到图片的问题， 解决方案： 在tomcat的server.xml中加入URIEncoding="utf-8" &lt;Connector connectionTimeout="20000" port="8
springboot上传图片太小
09-10
你可以通过调整Spring Boot的配置来解决图片上传太小的问题。首先，你需要检查上传图片的配置参数，如文件大小限制。你可以在配置文件（如application.properties或application.yml）中找到以下参数： - `spring.servlet.multipart.max-file-size`: 设置单个文件的最大大小，单位可以通过使用`KB`、`MB`或`GB`来指定。 - `spring.servlet.multipart.max-request-size`: 设置整个请求的最大大小，同样可以使用上述单位。 确保这些参数的值足够大以容纳你要上传的图片。 另外，你还可以使用`MultipartFile`对象进行处理，它是Spring提供的用于处理文件上传的工具类。你可以在后端控制器中接收和处理上传文件，并对其进行一些操作，如调整大小等。 如果你想在前端进行图片大小调整，你可以使用HTML5的`<input type="file">`元素结合JavaScript来实现。通过使用File API，你可以获取选择的图片并对其进行处理，包括调整大小。 希望以上信息能对你有所帮助！如果你有任何进一步的问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值