下面我会详细讲解“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技术站