码迷,mamicode.com
首页 > 编程语言 > 详细

SpringBoot上传图片

时间:2020-03-08 17:41:23      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:vat   except   head   account   har   filename   enter   thymeleaf   序号   

浅谈
我一直都觉得上传图片好复杂,除了本地上传,还有局域网上传,公网上传乱七八糟的,不仅看不懂,还不想学,因为老是觉得本地上传没啥大用处,直到今天,我才看透,什么本地不本地的,统统都是一个套路!
在springboot2.×版本以后,上传时就不需要任何配置了,什么配置文件也不需要,啥也不讲了,上来就是干!

下面是我自己做个一个商城项目上传图片的demo
首先是数据库表
技术图片
这个项目使用的是springboot,mybatis,thymeleaf
前台html页面代码

<div id="div">
        <form action="/demo/upload" method="post" enctype="multipart/form-data">
            上架的商品名称:<input class="input" type="text" name="name"><br>
            商品尺寸:<select class="input" name="size">
            <option value="M">M</option>
            <option value="L">L</option>
            <option value="XL">XL</option>
            <option value="XXL">XXL</option>
        </select><br>
            商品价格:<input class="input" type="text" name="price"><br>
            上架商品数量:<input class="input" type="text" name="number"><br>
            商品颜色:<select class="input" name="color">
            <option value="蓝色">蓝色</option>
            <option value="白色">白色</option>
            <option value="黑色">黑色</option>
            <option value="灰色">灰色</option>
        </select><br>
            商品类型:<select class="input" name="kind">
            <option value="男装">男装</option>
            <option value="女装">女装</option>
            <option value="童装">童装</option>
            <option value="时尚包包">时尚包包</option>
        </select><br>
            原价:<input class="input" type="text" name="preprice"><br>
            商品图片:<input class="input" type="file" name="pic"><br>
            上架日期:<input class="input" type="date" name="time"><br>
            <input type="submit" value="确认上架">
        </form>
    </div>

controller层代码

/**
 * 商品图片上传
 */
@RequestMapping("/upload")
    public String upload(@RequestParam(value = "pic") MultipartFile pic,@RequestParam Map param,Model model) throws ParseException {
    System.err.println("传过来的值"+param);
    if(pic.isEmpty()){
        System.err.println("上传文件不可为空");
    }
    String fileName=pic.getOriginalFilename();//得到文件名
    String suffixName=fileName.substring(fileName.lastIndexOf("."));//得到后缀名
    System.err.println("suffixName:"+suffixName);
    String filepath="D:/tempFiles/files/";//指定图片上传到哪个文件夹的路径
    fileName= UUID.randomUUID()+suffixName;//重新命名图片,变成随机的名字
    System.err.println("fileName:"+fileName);
    File dest=new File(filepath+fileName);//在上传的文件夹处创建文件
    try {
        pic.transferTo(dest);//把上传的图片写入磁盘中
    } catch (IOException e) {
        e.printStackTrace();
    }
    //到这里为止,下面的都不用再看了,跟上传没关系,都是实体类传值竟然麻烦成这个样子
    Shangpin shangpin=new Shangpin();
    //这里就不想改了,把fileName当成picpath传过去算了
    String picpath=fileName;
   shangpin.setPicpath(picpath);
    shangpin.setName((String) param.get("name"));
    shangpin.setSize((String) param.get("size"));
    double price=Double.parseDouble(param.get("price").toString());
    shangpin.setPrice(price);
    shangpin.setNumber(Integer.valueOf(param.get("number").toString()));
    shangpin.setColor((String) param.get("color"));
    double preprice=Double.parseDouble(param.get("preprice").toString());
    shangpin.setPreprice(preprice);
    shangpin.setKind((String) param.get("kind"));
    String sellerAccount=phone;
    shangpin.setSellerAccount(sellerAccount);
    SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyy-MM-dd");
    shangpin.setTime(simpleDateFormat.parse((String) param.get("time")));
    int i=selectService.insertSP(shangpin);
    if(i>0){
        model.addAttribute("info","商品上传成功!");
        return "forward:getSP";
    }
    model.addAttribute("info","商品上传失败!");
    return "forward:getSP";
}

对了,千万不能忘记实体类,就和上边那张表的字段相对应,一个也不能错,错了它也会错。

package com.qianlong.entity;
import java.util.Date;

public class Shangpin {
    private Integer id;
    private String name;
    private String size;
    private double price;
    private String sellerAccount;
    private int number;
    private String color;
    private double preprice;
    private String picpath;
    private Date time;
    private String kind;
    //set和get方法省略

service层忽略,来看dao层,也就是mapper文件

  /**
     * 上架商品(上传商品图片)
     */
    @Insert(value = "insert into shangpin(name,size,price,sellerAccount,number,color," +
            "preprice,picpath,time,kind) values(#{name},#{size},#{price}," +
            "#{sellerAccount},#{number},#{color},#{preprice},#{picpath},#{time},#{kind})")
    int insertSP(Shangpin shangpin);

然后就完成上传了,上传成功之后跳转到列表页面,使用thymeleaf提示上传成功

<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <title>商品管理</title>
        <script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>


    </head>
    <body>
    <a style="margin-left: 440px" href="/demo/backAddSP">商品上架</a><span style="color: red;" th:text="${info}"></span>
        <table border="4">
            <thead>
            <tr>
                <th width="100px">序号</th>
                <th width="100px">商品名称</th>
                <th width="100px">尺寸</th>
                <th width="100px">价格</th>
                <th width="100px">数量</th>
                <th width="100px">颜色</th>
                <th width="100px">原价</th>
                <th width="100px">商品类型</th>
                <th width="100px">图片路径</th>
                <th width="100px">添加时间</th>
                <th width="100px">操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错-->
            <tr th:each="user : ${list}">
                <!-- 将用户的主键 uId 存在在 name 属性中-->
                <td width="100px" th:text="${user.id}"></td>
                <td width="100px" th:text="${user.name}"></td>
                <td width="100px" th:text="${user.size}"></td>
                <td width="100px" th:text="${user.price}"></td>
                <td width="100px" th:text="${user.number}"></td>
                <td width="100px" th:text="${user.color}"></td>
                <td width="100px" th:text="${user.preprice}"></td>
                <td width="100px" th:text="${user.kind}"></td>
                <td width="100px" th:text="${user.picpath}"></td>
                <!-- 使用dates对象格式化日期-->
                <td width="100px" th:text="${#dates.format(user.time, 'yyyy-MM-dd')}"></td>
                <td style="text-align: center" width="100px"><intput type="button" th:onclick="del([[${user.id}]]);">删除</intput></td>
            </tr>
            </tbody>
        </table>
        <script>
            function del(id) {
                alert(id);
            }
        </script>
    </body>
</html>

技术图片
图片上传到这里就结束啦,有问题欢迎留言!

项目地址:链接:https://pan.baidu.com/s/1DRr1Y9h0T7nvOfEL0oGvyw 提取码:w6dt

SpringBoot上传图片

标签:vat   except   head   account   har   filename   enter   thymeleaf   序号   

原文地址:https://www.cnblogs.com/fantongxue/p/12443331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!