1. Python技术站首页
  2. 其他
  3. Java

spring boot实现上传图片并在页面上显示及遇到的问题小结

• Java
yizhihongxing

下面我会详细讲解“spring boot实现上传图片并在页面上显示及遇到的问题小结”的完整攻略。

1. 准备工作

在开始实现上传图片并在页面上显示之前，我们需要先准备好以下的环境和工具：

2. 实现上传图片

在Spring Boot中实现上传图片的方式很多，这里我们以常用的MultipartFile为例。假设我们的上传页面是/upload，在这个页面中，用户可以选择要上传的图片，然后点击上传按钮，将图片上传到服务器。接下来是实现代码：

2.1 HTML页面代码

首先是上传页面的HTML代码，使用了Bootstrap和Thymeleaf的模板引擎：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>上传图片</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>上传图片</h2>
  <form th:action="@{/upload}" th:method="post" enctype="multipart/form-data">
    <div class="form-group">
      <label>选择图片</label>
      <input type="file" name="file" class="form-control-file" accept="image/png, image/jpeg">
    </div>
    <button type="submit" class="btn btn-primary">上传</button>
  </form>
</div>
</body>
</html>

关键代码：

  • enctype="multipart/form-data"：用于支持文件上传。
  • accept="image/png, image/jpeg"：限制只能上传PNG或JPEG格式的图片。

2.2 Controller的实现

然后是Controller的实现代码：

import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

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

@Controller
public class UploadController {
    @Value("${file.upload-dir}")
    private String uploadDir;

    @GetMapping("/upload")
    public String uploadPage() {
        return "upload";
    }

    @PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public String uploadFile(@RequestParam("file") MultipartFile file, Model model) throws IOException {
        // 上传文件
        String fileName = file.getOriginalFilename();
        File targetFile = new File(uploadDir + File.separator + fileName);
        FileCopyUtils.copy(file.getBytes(), targetFile);

        // 将文件名放入Model返回页面
        model.addAttribute("fileName", fileName);
        return "result";
    }
}

关键代码：

  • @RequestParam("file") MultipartFile file：用于接收前端上传的文件。
  • FileCopyUtils.copy(file.getBytes(), targetFile);：将上传的文件保存到指定的目录。

2.3 配置文件

我们需要在配置文件中配置文件上传目录：

file.upload-dir=/path/to/your/upload/dir

2.4 上传成功页面

最后是上传成功页面（返回的Model中带有文件名）：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>上传成功</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
  <h2>上传成功</h2>
  <div class="alert alert-success" role="alert">
    <p>您上传的文件是：<span th:text="${fileName}"></span></p>
    <p>您可以在以下位置查看您的文件：</p>
    <pre class="alert-pre border bg-light p-2"><code>/path/to/your/upload/dir/<span th:text="${fileName}"></span></code></pre>
  </div>
</div>
</body>
</html>

OK，当我们访问/upload页面，选择好图片并上传之后，就会自动跳转到上传成功页面，展示上传的文件名和保存路径。

3. 实现显示图片

实现上传图片后，我们还需要将上传的图片显示在页面上。这里为了方便，我们使用一个简单的图片预览功能，当用户选择上传图片后，会在上传页面上预览显示该图片。

3.1 HTML页面代码

首先是上传页面的HTML代码，我们需要在页面上加入一个img标签，在用户选择图片后更新该img的src属性，从而达到实时预览图片的效果。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>上传图片</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // 实时预览图片
    $(function () {
      $("#file").change(function () {
        var img = $("#preview");
        img.attr("src", window.URL.createObjectURL(this.files[0]));
      });
    });
  </script>
</head>
<body>
<div class="container mt-3">
  <h2>上传图片</h2>
  <form th:action="@{/upload}" th:method="post" enctype="multipart/form-data">
    <div class="form-group">
      <label>选择图片</label>
      <input type="file" id="file" name="file" class="form-control-file" accept="image/png, image/jpeg">
    </div>
    <div class="form-group">
      <img id="preview" src="#" alt="预览" class="img-fluid" style="max-width: 100%">
    </div>
    <button type="submit" class="btn btn-primary">上传</button>
  </form>
</div>
</body>
</html>

关键代码：

  • $(function () {...});：利用jQuery实现实时对img标签的属性src进行更新。

3.2 Controller的实现

然后是Controller的实现代码，我们需要在上传成功后，将上传的图片文件路径保存在Model中，返回到展示图片的页面，在页面中通过路径，显示出上传的图片。

import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

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

@Controller
public class UploadController {
    @Value("${file.upload-dir}")
    private String uploadDir;

    @GetMapping("/upload")
    public String uploadPage() {
        return "upload";
    }

    @PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public String uploadFile(@RequestParam("file") MultipartFile file, Model model) throws IOException {
        // 上传文件
        String fileName = file.getOriginalFilename();
        File targetFile = new File(uploadDir + File.separator + fileName);
        FileCopyUtils.copy(file.getBytes(), targetFile);

        // 将文件名放入Model返回页面
        model.addAttribute("fileName", fileName);
        model.addAttribute("filePath", "/uploads/" + fileName);
        return "result";
    }
}

关键代码：

  • model.addAttribute("filePath", "/uploads/" + fileName);：将上传的文件路径带入Model，供图片展示页面获取。

3.3 静态文件配置

接下来，我们需要在Spring Boot的配置文件中，配置静态资源目录。在配置文件中，我们添加以下配置：

spring.resources.static-locations=file:/path/to/your/upload/dir/

这里，我们设置静态资源目录为上传的图片所在的目录。

3.4 图片展示页面

最后，我们需要创建一个图片展示页面，用于展示上传的图片。这个页面需要使用到Bootstrap和Thymeleaf的模板引擎，而图片的展示使用了img标签。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>上传成功</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
  <h2>上传成功</h2>
  <div class="row">
    <div class="col-md-3">
      <div class="card">
        <img th:src="@{${filePath}}" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title" th:text="${fileName}"></h5>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

关键代码：

  • th:src="@{${filePath}}"：利用Thymeleaf实现图片路径的动态获取。

这样，我们就实现了上传图片并在页面上显示的功能。

4. 遇到的问题小结

在实现上传图片并在页面上显示的过程中，我们可能会遇到以下问题：

  • 上传文件大小限制问题：可以在Spring Boot的配置文件中，设置MultipartFile的上传文件大小限制。
  • 图片文件格式限制问题：可以在HTML页面中设置accept属性限制文件格式，也可以在Controller中使用MultipartFile的getContentType()方法限制，或者使用第三方工具。

总结起来，这个功能的主要难点点有：

  • 如何支持文件上传并处理文件：这个问题通过使用MultipartFile实现较为方便。
  • 如何将上传的文件名或路径返回到页面：这个问题需要使用Controller将上传后的文件名或路径放入Model中，然后页面通过${}表达式获取。
  • 如何显示图片：这个问题需要在上传成功后，将图片路径放入Model中，然后在展示图片的页面，使用img标签进行显示。

以上是实现上传图片并在页面上显示的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：spring boot实现上传图片并在页面上显示及遇到的问题小结 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月20日
下一篇 2023年5月20日

相关文章

  • JAVA读取文本文件内容实例代码

    下面是关于”JAVA读取文本文件内容的实例代码”的完整攻略： 一、准备工作 首先需要创建一个文本文件(test.txt)并保存在计算机中，文件中可以存放一些需要读取的文本内容。 二、使用JAVA读取文本文件内容 Java 读取文本文件内容可以分为以下几个步骤: 创建File对象，指定需要读取的文本文件路径。 创建BufferedReader对象，使用 Fil…

    Java 2023年5月20日
    00

  • Java线程休眠的5种方法

    Java线程休眠的5种方法 Java中的线程可以通过休眠来暂停一段时间。线程的休眠有5种方法，本文将详细介绍这5种方法，并给出代码示例。 方法一：使用Thread.sleep() Thread.sleep()是Java中比较常用的线程休眠方法。它可以将当前正在执行的线程休眠指定的时间，单位是毫秒。下面是使用Thread.sleep()方法的示例： publi…

    Java 2023年5月19日
    00

  • java日期时间操作工具类

    Java 日期时间操作工具类 在Java开发中，经常需要进行日期时间的处理和计算。Java提供了Date和Calendar两个基础的日期时间类，但它们的使用不方便，比较繁琐。因此，在日常开发中，我们通常会使用一些日期时间操作工具类来简化日期时间的操作。本文将介绍几个比较好用的Java日期时间操作工具类。 1. joda-time Joda-Time是一款开源…

    Java 2023年5月20日
    00

  • 实例讲解Java的MyBatis框架对MySQL中数据的关联查询

    下面是关于“实例讲解Java的MyBatis框架对MySQL中数据的关联查询”的完整攻略，内容如下： 1. 什么是MyBatis框架？ MyBatis（又称ibatis）是一款优秀的基于Java语言的持久层框架，它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的JDBC代码以及对结果集的封装，支持 JDBC事务处理和灵活的缓存机制。…

    Java 2023年5月20日
    00

  • 详解JWT token心得与使用实例

    以下是详解JWT token心得与使用实例的完整攻略。 什么是JWT JWT（JSON Web Token）是一种开放标准，定义了用于在网络应用程序间传递声明的一个紧凑、自包含的方式。JWT 这个标准定义了一种简洁且安全的方式，可以在各方之间传输包含各种信息的 JSON 对象。JWT 主要用于身份验证和授权。 JWT 的组成结构 一个 JWT token 由…

    Java 2023年5月20日
    00

  • JDBC中Statement和Preparement的使用讲解

    当使用JDBC连接数据库时，通常使用Statement和Preparement来执行SQL语句。本攻略将详细讲解它们的使用。 Statement Statement是用于执行静态SQL语句的对象。它适用于只需要执行简单的SQL语句的场景。下面是Statement的使用示例： String sql = "SELECT * FROM users WHE…

    Java 2023年6月16日
    00

  • springboot中使用ElasticSearch的详细教程

    下面是“Spring Boot 中使用 ElasticSearch 的详细教程”的攻略： 需求描述 在基于 Spring Boot 构建的应用程序中，如何使用 ElasticSearch 实现高效的搜索功能？在这个教程中，我们将详细讲解使用 Spring Boot 集成 ElasticSearch 的方法，包括从零开始配置和开发一个实际的示例应用程序。 准备…

    Java 2023年5月19日
    00

  • 使用Java编写一个简单的Web的监控系统

    使用Java编写一个简单的Web监控系统需要以下几个步骤： 选择合适的监控框架：选择一个合适的监控框架来实现Web的监控，比如可以选择Spring Boot Actuator、Micrometer Actuator等。这些框架已经内置了一些用于监控Web应用程序的功能，包括HTTP请求记录、应用程序指标收集等等。 设置监控端点：在监控框架中配置监控端点，使得…

    Java 2023年5月19日
    00
合作推广
合作推广
分享本页
返回顶部