标签: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
标签:vat except head account har filename enter thymeleaf 序号
原文地址:https://www.cnblogs.com/fantongxue/p/12443331.html