从零开始的Springboot的HelloWord，并实现图片上传功能

最近因需要快速搭建一个后台，目标功能为实现图片上传功能，然后通过Java后台调用Python模块运行，返回运行结果显示。
由于对后台功能要求简单，可创建最简单的 springboot demo即可。

本文主要内容：
一. 10步快速搭建Springboot 后台
二：实现springboot 前后端数据传输，以及实现上传图片和图片预加载功能

一. 快速搭建Springboot 后台

1. 推荐使用 IDEA 开发工具；

2. 新建项目，选择 spring initallizr，选择 jdk 版本，然后next

   
   
   image.png

3. 勾选 spring web 即可创建项目，新建项目可能需要几分钟的下载时间
   

   image.png

4. 目录结构如下：

   
   
   image.png

5. 在 pom.xml 下配置 页面启动器

   
       org.springframework.boot
       spring-boot-starter-web
     
       
   
   
       org.springframework.boot
       spring-boot-starter-thymeleaf
   

6. 在 src/main/resources 目录下 application.properties 文件中配置HTML和js的存放路径：

spring.thymeleaf.prefix=classpath:/templates/

spring.web.resources.static-locations=classpath:/

7. 在 resource/templates 文件下编写 HTML 页面，在 resources/static 目录下存放 js，css等文件

   
   
   image.png

8. 在java中新建 controller包，新建 indexcontroller类，按需要设立即可
   IndexController 类中代码如下：

@Controller
public class IndexController {
    @RequestMapping("/index") // 定义路径
    public String showHelloWorld(){
        return "index_form";  // 返回页面名字
    }

此处注意 @RequestMapping("/index") 中路径 “/index” 和 返回的页面名字 “index_form” 不要相同，否则会报错

9. 在idea中运行自动生成的SpringbootFashionApplication main函数（不同项目名对应不同名字），出现以下信息代表运行成功：

   
   
   image.png
10. 然后在浏览器中输入 localhost:8080/index 即可打开 index_form.html 页面，至此 简单的 springboot demo搭建完毕。

二：实现springboot 前后端数据传输，以及实现上传图片和图片预加载功能：

1. 数据传输：前端使用jQuery插件，方便使用
   index_form.html 代码如下：

    
    


点击测试 Hello World


点击测试 index form





这里是大大的测试button 
实现文件长传


    
    

界面：

image.png

2. 实现图片预览功能：

   
   
   image.png
   
   

   HTML中新建 input 类型选择 文件，js代码如下

$('#upload_image').change(function (){
        // 获取filelist 的第一个元素
        var file = document.getElementById('upload_image').files[0];
        var src = window.URL.createObjectURL(file);
        document.getElementById('img_preview').src = src;
    })

当在页面中选择文件加入图片时，实现效果如下：

image.png

3. 实现图片上传功能

• HTML中增加一个提交按钮：

  
  
  image.png
• 定义 接收图片数据的 Controller类，代码如下：

@Controller
public class FileTestController {

    @RequestMapping("/filetest")
    @ResponseBody
    public String file(MultipartFile fileImage) throws IOException {

        File directory = new File(""); // 定义当前路径
        String path = directory.getCanonicalPath();  // 获取当前路径

        File file_dir = new File(path, "images"); // 文件存放路径
        if (!file_dir.exists()) {
            file_dir.mkdirs();
        }

        String fileName = fileImage.getOriginalFilename();
        if (null == fileName || fileName.isEmpty()) {
            System.out.println("file name is empty!");
            return "empty";
        }
        File imageFile = new File(file_dir,fileName);
        System.out.println(imageFile.getAbsoluteFile());
        try {
            fileImage.transferTo(imageFile); //Transfer the received file to the given destination file.
        }catch(IOException e){
            e.printStackTrace();
        }
        return "ok";
    }

}

• 点击上传，上传成功时会返回 ok并在页面上显示。

4. 至此实现图片上传功能。