spring boot jar 上传图片

原创

mob64ca12d59fe5 2024-09-23 03:33:30 ©著作权

文章标签 spring 上传图片上传 文章分类 spring boot 后端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d59fe5的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Spring Boot Jar 上传图片的实现

在现代 web 开发中，上传图片是一个常见的需求。使用 Spring Boot 来构建你的 web 应用程序可以让这个过程变得简单高效。在本文中，我们将探讨如何通过 Spring Boot 的 JAR 文件上传图片，并提供相关的代码示例。

项目结构

在开始之前，我们先了解一下项目的基本结构。我们可以将项目分为以下几个部分：

控制层（Controller）：处理上传请求
服务层（Service）：业务逻辑处理
数据访问层（Repository）：保存图片信息（可选）
数据库（如果需要）：存储图片相关数据（可选）

下面是项目结构的示意图：

erDiagram
    USER {
        int id PK
        string username
        string password
    }
    IMAGE {
        int id PK
        string imagePath
    }
    
    USER ||--o{ IMAGE : uploads

依赖配置

在 pom.xml 中添加以下必要的依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

控制器实现

接下来，我们将实现一个控制器，其中包含一个用于上传图片的 API：

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;

import java.io.File;
import java.io.IOException;

@Controller
public class ImageUploadController {
    
    @GetMapping("/upload")
    public String uploadPage() {
        return "upload";
    }
    
    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file, Model model) {
        String fileName = file.getOriginalFilename();
        String filePath = "uploads/" + fileName;
        
        try {
            file.transferTo(new File(filePath));
            model.addAttribute("message", "上传成功: " + fileName);
        } catch (IOException e) {
            model.addAttribute("message", "上传失败: " + fileName);
            e.printStackTrace();
        }
        
        return "result";
    }
}

视图层实现

我们需要创建一个简单的 HTML 页面来上传图片。我们将创建一个名为 upload.html 的文件，内容如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
</head>
<body>
    上传图片
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" />
        <button type="submit">上传</button>
    </form>
</body>
</html>

结果页面 result.html 的内容如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>结果</title>
</head>
<body>
    结果
    <p th:text="${message}"></p>
    <a rel="nofollow" href="/upload">返回上传页面</a>
</body>
</html>

甘特图：开发计划

接下来，我们可以使用 Mermaid 来描述开发计划的甘特图。这将有助于我们更好地组织各个开发阶段。

gantt
    title 图片上传功能开发计划
    dateFormat  YYYY-MM-DD
    section 项目启动
    项目初始化         :a1, 2023-10-01, 1d
    section 开发阶段
    需求分析           :a2, 2023-10-02, 2d
    控制器实现         :a3, 2023-10-04, 3d
    视图层构建         :a4, 2023-10-07, 2d
    测试与部署         :a5, 2023-10-09, 3d