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