SpringBoot用户上传图片与回显

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

基本思路

  • 项目较小,不使用独立的文件服务器,直接将图片存在服务器的磁盘上,数据库存放图片在服务器上的绝对路径。
  • 但在显示图片时标签的src属性不能直接使用从数据库中取出来的绝对路径,那样图片会显示不出来。
  • 为了简化问题这个demo中暂不使用数据库也不对图片的名字进行随机化处理。

准备工作

  • 在springboot的全局配置文件中增加以下配置:cbs.imagesPath=file:/media/root/MyDisk/download/abcde/
  • file:后面是磁盘中的目录,最后必须要有一个"/"号,我是目录是如上所示。
  • 添加Thymeleaf依赖

上传图片

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


<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


<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}}"/> 
    body>
html>

效果

上传页面:SpringBoot用户上传图片与回显_第1张图片
选择图片:SpringBoot用户上传图片与回显_第2张图片
点击上传页面的确定按钮后:SpringBoot用户上传图片与回显_第3张图片

下载这个demo

码云:https://gitee.com/blog_quotes/springboot-show-pic.git

你可能感兴趣的:(JavaWeb)