利用 Spring Boot 实现图片上传

目录
一、前言? ? ? ??
二、项目预备
2.1、创建SpringBoot项目
2.2、项目结构
2.3、配置文件
2.4、创建控制器
2.5、创建服务
2.6创建前端界面
2.7、静态资源
三、运行项目
四、测试上传功能
总结

---

一、前言

在今世 web 开发中，图片上传功能是一个常见的需求。本文将先容怎样利用 Spring Boot 实现一个简朴的图片上传功能，包罗文件的上传、存储和展示。我们将利用 Spring Boot 的文件上传功能，并团结 Thymeleaf 作为模板引擎来构建前端界面。
二、项目预备

2.1、创建SpringBoot项目

可以利用 Spring Initializr 创建一个新的 Spring Boot 项目。选择以下依靠：

• Spring Web
  
• Thymeleaf
  
• Spring Boot DevTools（可选，方便开发时热摆设）
  

2.2、项目结构

springboot-image-upload
│
├── src
│ ├── main
│ │ ├── java
│ │ │ └── com
│ │ │ └── example
│ │ │ └── imageupload
│ │ │ ├── ImageUploadApplication.java
│ │ │ ├── controller
│ │ │ │ └── ImageUploadController.java
│ │ │ └── service
│ │ │ └── ImageUploadService.java
│ │ └── resources
│ │ ├── static
│ │ ├── templates
│ │ │ └── upload.html
│ │ └── application.properties
└── pom.xml
2.3、配置文件

在 src/main/resources/application.properties 中，添加如下配置：

1. # 文件上传的最大大小
2. spring.servlet.multipart.max-file-size=2MB
3. spring.servlet.multipart.max-request-size=2MB
5. # 上传文件的存储路径
6. file.upload-dir=uploads

复制代码

2.4、创建控制器

在 com.example.imageupload.controller 包下，创建 ImageUploadController 类。

1. package com.example.imageupload.controller;
3. import com.example.imageupload.service.ImageUploadService;
4. import org.springframework.beans.factory.annotation.Autowired;
5. import org.springframework.stereotype.Controller;
6. import org.springframework.ui.Model;
7. import org.springframework.web.bind.annotation.GetMapping;
8. import org.springframework.web.bind.annotation.PostMapping;
9. import org.springframework.web.bind.annotation.RequestParam;
10. import org.springframework.web.multipart.MultipartFile;
12. import java.util.List;
14. @Controller
15. public class ImageUploadController {
17.     @Autowired
18.     private ImageUploadService imageUploadService;
20.     @GetMapping("/")
21.     public String uploadPage(Model model) {
22.         List<String> uploadedImages = imageUploadService.getUploadedImages();
23.         model.addAttribute("uploadedImages", uploadedImages);
24.         return "upload";
25.     }
27.     @PostMapping("/upload")
28.     public String uploadImage(@RequestParam("file") MultipartFile file, Model model) {
29.         if (file.isEmpty()) {
30.             model.addAttribute("message", "请选择一个文件进行上传");
31.             return "upload";
32.         }
34.         // 保存文件
35.         String imagePath = imageUploadService.uploadImage(file);
36.         model.addAttribute("message", "文件上传成功: " + imagePath);
37.         model.addAttribute("uploadedImages", imageUploadService.getUploadedImages());
38.         return "upload";
39.     }
40. }

复制代码

2.5、创建服务

在 com.example.imageupload.service 包下，创建 ImageUploadService 类。

1. package com.example.imageupload.service;
3. import org.springframework.beans.factory.annotation.Value;
4. import org.springframework.stereotype.Service;
5. import org.springframework.web.multipart.MultipartFile;
7. import java.io.File;
8. import java.io.IOException;
9. import java.nio.file.Files;
10. import java.nio.file.Path;
11. import java.nio.file.Paths;
12. import java.util.ArrayList;
13. import java.util.List;
15. @Service
16. public class ImageUploadService {
18.     @Value("${file.upload-dir}")
19.     private String uploadDir;
21.     public String uploadImage(MultipartFile file) {
22.         try {
23.             // 确保目录存在
24.             File dir = new File(uploadDir);
25.             if (!dir.exists()) {
26.                 dir.mkdirs();
27.             }
29.             // 文件保存路径
30.             Path filePath = Paths.get(uploadDir, file.getOriginalFilename());
31.             file.transferTo(filePath);
33.             return file.getOriginalFilename();
34.         } catch (IOException e) {
35.             e.printStackTrace();
36.             return null;
37.         }
38.     }
40.     public List<String> getUploadedImages() {
41.         List<String> images = new ArrayList<>();
42.         File dir = new File(uploadDir);
43.         if (dir.exists()) {
44.             for (File file : dir.listFiles()) {
45.                 images.add(file.getName());
46.             }
47.         }
48.         return images;
49.     }
50. }

复制代码

2.6创建前端界面

在 src/main/resources/templates 目录下，创建 upload.html 文件。

1. <!DOCTYPE html>
2. <html xmlns:th="http://www.thymeleaf.org">
3. <head>
4.     <title>图片上传</title>
5.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
6. </head>
7. <body>
8. <div class="container">
9.     <h1 class="mt-5">图片上传</h1>
10.     <form action="/upload" method="post" enctype="multipart/form-data">
11.         <div class="form-group">
12.             <label for="file">选择文件</label>
13.             <input type="file" class="form-control-file" id="file" name="file" required>
14.         </div>
15.         <button type="submit" class="btn btn-primary">上传</button>
16.     </form>
18.     <div th:if="${message}" class="alert alert-info mt-3">
19.         <p th:text="${message}"></p>
20.     </div>
22.     <h2 class="mt-5">已上传的图片</h2>
23.     <div class="row">
24.         <div class="col-md-3" th:each="image : ${uploadedImages}">
25.             <div class="card mb-4">
26.                 <img th:src="@{/uploads/{image}(image=image)}" class="card-img-top" alt="图片">
27.                 <div class="card-body">
28.                     <h5 class="card-title" th:text="${image}"></h5>
29.                 </div>
30.             </div>
31.         </div>
32.     </div>
33. </div>
34. </body>
35. </html>

复制代码

2.7、静态资源

在 src/main/resources/static 目录下，创建 uploads 文件夹，确保上传的图片能够被访问。
三、运行项目

确保项目依靠已经精确引入，并在 IDE 中启动项目。打开浏览器，访http://localhost:8080/，你应该可以看到上传界面。
四、测试上传功能

• 选择一个图片文件进行上传，点击“上传”按钮。
  
• 上传成功后，页面会显示上传的消息和已上传的图片列表。
  

总结

通过上述步调，我们成功实现了一个简朴的图片上传功能。你可以根据自己的需求进一步扩展功能，比如增加文件范例和巨细的限制、支持多文件上传、实现文件的删除功能等。盼望这个示例能帮助你在项目中实现图片上传功能！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。