Springboot框架实现图片上传显示并保存地址到数据库

1.在application.properties.xml中配置

# SpringBoot框架实现图片上传显示并保存地址到数据库
#spring boot上传文件大小限制
spring.http.multipart.max-file-size=200MB
spring.http.multipart.max-request-size=200MB

2.创建物品实体类productModel

package com.lyancafe.material.model;

/**
* @author scy 2018/8/22
*/
public class ProductModel {

private Integer id;
private String image;

public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}

public String getImage() {
return image;
}

public void setImage(String image) {
this.image = image;
}

@Override
public String toString() {
return "ProductModel{" +
"id=" + id +
", image='" + image + '\'' +
'}';
}
}

3.创建ProductController

package com.lyancafe.material.controller;

import com.lyancafe.material.bo.ProductService;
import com.lyancafe.material.model.ProductModel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.List;
import java.util.UUID;

/**
* @author scy 2018/8/22
*/
@Controller
@RequestMapping("product")
public class ProductController {

@Autowired
private ProductService productService;

@RequestMapping("list")
public String list(Model model) {
List<ProductModel> productList = productService.list();
model.addAttribute("productList", productList);
return "list";
}

@RequestMapping("index")
public String index() {
return "index";
}

@RequestMapping("addProduct")
public String fileUpload(MultipartFile file, ProductModel productModel) throws IOException {
/**
* 上传图片
*/
//图片上传成功后,将图片的地址写到数据库
//保存图片的路径(这是存在我项目中的images下了,你们可以设置路径)
String filePath = "F:\\test_myself\\suncystudy\\lyancafe-material\\material\\src\\main\\webapp\\images";
//获取原始图片的拓展名
String originalFilename = file.getOriginalFilename();
//新的文件名字
String newFileName = UUID.randomUUID() + originalFilename;
//封装上传文件位置的全路径
File targetFile = new File(filePath, newFileName);
//把本地文件上传到封装上传文件位置的全路径
file.transferTo(targetFile);
productModel.setImage(newFileName);
/**
* 保存商品
*/
productService.save(productModel);
return "redirect:/product/list";
}
}

4.创建接口ProductService

package com.lyancafe.material.service;

import com.lyancafe.material.model.ProductModel;

import java.util.List;

/**
* @author scy 2018/8/22
*/
public interface ProductService {
/**
*查询商品
*@return
*/
List<ProductModel> list();

/**
*保存商品
* @param productModel
*/
void save(ProductModel productModel);
}

5.创建实现类ProductServiceImpl

package com.lyancafe.material.service;

import com.lyancafe.material.dao.ProductDao;
import com.lyancafe.material.model.ProductModel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
* @author scy 2018/8/22
*/
@Service
public class ProductServiceImpl implements ProductService {
@Autowired
private ProductDao productDao;

@Override
public List<ProductModel> list() {
return productDao.list();
}

@Override
public void save(ProductModel productModel) {
productDao.save(productModel);
}
}

6.创建ProductDao接口

package com.lyancafe.material.dao;

import com.lyancafe.material.model.ProductModel;

import java.util.List;

/**
* @author scy 2018/8/22
*/
public interface ProductDao {
/**
*查询商品
*@return
*/
List<ProductModel> list();

/**
*保存商品
* @param productModel
*/
void save(ProductModel productModel);
}

7.创建ProductDao.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.lyancafe.material.dao.ProductDao">
<!--查询所有-->
<select id="list" resultType="com.lyancafe.material.model.ProductModel">
SELECT * FROM product
</select>

<!--保存所有-->
<insert id="save" parameterType="com.lyancafe.material.dao.ProductDao">
INSERT INTO product(image) VALUES (#{image})
</insert>
</mapper>

8.首页index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<base href="<%=basePath%>>">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="<%=path%>product/addProduct" method="post" enctype="multipart/form-data">
图片:<input type="file" name="file">
<input type="submit" value="提交">
</form>
</body>
</html>

9.显示列表list.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<base href="<%=basePath%>>">
<meta charset="UTF-8">
<title>查询商品</title>
<link rel="stylesheet" type="text/css" href="<%=path%>css/allUser.css">
<script src="<%=path%>js/allUser.js"></script>
<style type="text/css">
#images {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="login_frame">
<p id="image_logo"><img src="<%=path%>images/lyancafe.png"></p>
<table border="1">
<tbody>
<tr>
<th>序号</th>
<th>图片</th>
</tr>
<c:if test="${empty productList}">
<li>暂无商品</li>
</c:if>
<c:if test="${!empty productList}">
<c:forEach items="${productList}" var="product">
<tr>
<th>${product.id}</th>
<th>
<c:if test="${product.image !=null }">
<img id="images" alt="" src="<%=path%>images/${product.image }">
</c:if>
</th>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</div>
</body>
</html>

10.访问路径:http://localhost:8080/product/index

上传成功后:

解决不了的可以咨询,如果恢复不及时加qq:501397578

posted @ 2018-08-22 17:21  暖瞳123  阅读(9616)  评论(4编辑  收藏  举报