现在的时间：2018-10-27

最近在做的一个东西要显示用户上传的图片，以前使用独立的tomcat时是很容易的一件事，但SpringBoot使用集成的tomcat，所以需要配置一下。

基本思路

项目较小，不使用独立的文件服务器，直接将图片存在服务器的磁盘上，数据库存放图片在服务器上的绝对路径。

但在显示图片时<img src=“xxx”/>标签的src属性不能直接使用从数据库中取出来的绝对路径，那样图片会显示不出来。

为了简化问题这个demo中暂不使用数据库也不对图片的名字进行随机化处理。

准备工作

在springboot的全局配置文件中增加以下配置：cbs.imagesPath=file:/media/root/MyDisk/download/abcde/

file:后面是磁盘中的目录，最后必须要有一个"/"号，我是目录是如上所示。

添加Thymeleaf依赖

上传图片

上传页面 index.html (这个页面直接提交给一个controller，在controller中将图片存到磁盘中)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>上传头像</title>
    </head>

    <body>
        <form action="/fileUploadController" method="post" enctype="multipart/form-data">
            上传头像：<input type="file" name="filename"/><br/><br/>
            <input type="submit" value="确定"/>
        </form>
    </body>
</html>

存入图片的控制器

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;

@Controller
public class TestController
{
    @Value("${cbs.imagesPath}")
    private String theSetDir; //全局配置文件中设置的图片的路径

    @GetMapping("/{page}")
    public String toPate(@PathVariable("page") String page)
    {
        return page;
    }

    @RequestMapping(value = "/fileUploadController")
    public String fileUpload(MultipartFile filename, Model model) throws Exception
    {
        String parentDirPath = theSetDir.substring(theSetDir.indexOf(':')+1, theSetDir.length()); //通过设置的那个字符串获得存放图片的目录路径
        String fileName = filename.getOriginalFilename();

        File parentDir = new File(parentDirPath);
        if(!parentDir.exists()) //如果那个目录不存在先创建目录
        {
            parentDir.mkdir();
        }

        filename.transferTo(new File(parentDirPath + fileName)); //全局配置文件中配置的目录加上文件名

        model.addAttribute("pic_name", fileName);

        return "show";
    }
}

显示图片

增加一个配置类
不需要知道这个配置类具体是怎样实现的，只需要知道这样配置后有如下效果：上传到cbs.imagesPath配置的目录中的图片，在项目中可以访问，访问是时标签的src属性的属性值是"/images/图片名.扩展名"。

import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebAppConfig implements WebMvcConfigurer
{

    @Value("${cbs.imagesPath}")
    private String mImagesPath;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry)
    {
        if (mImagesPath.equals("") || mImagesPath.equals("${cbs.imagesPath}"))
        {
            String imagesPath = WebAppConfig.class.getClassLoader().getResource("").getPath();
            if (imagesPath.indexOf(".jar") > 0)
            {
                imagesPath = imagesPath.substring(0, imagesPath.indexOf(".jar"));
            }
            else if (imagesPath.indexOf("classes") > 0)
            {
                imagesPath = "file:" + imagesPath.substring(0, imagesPath.indexOf("classes"));
            }
            imagesPath = imagesPath.substring(0, imagesPath.lastIndexOf("/")) + "/images/";
            mImagesPath = imagesPath;
        }
        LoggerFactory.getLogger(WebAppConfig.class).info("imagesPath=" + mImagesPath);
        registry.addResourceHandler("/images/**").addResourceLocations(mImagesPath);
    }
}

显示图片的页面 show.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>上传的图片</title>
    </head>

    <body>
        上传的图片:
        <img th:src="@{'/images/' + ${pic_name}}"/> <!--/images/xxx.xxx-->
    </body>
</html>

效果

上传页面：
选择图片：
点击上传页面的确定按钮后：

下载这个demo

码云：https://gitee.com/sacredness/SpringBoot-ShowPic

SpringBoot用户上传图片与回显

基本思路

准备工作

上传图片

显示图片

效果

下载这个demo

猜你喜欢