SpringBoot上传图片

Posted 2021-03-06 整理是一切的开始

浅谈
我一直都觉得上传图片好复杂，除了本地上传，还有局域网上传，公网上传乱七八糟的，不仅看不懂，还不想学，因为老是觉得本地上传没啥大用处，直到今天，我才看透，什么本地不本地的，统统都是一个套路！
在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