springboot本地上传图片文件,Thymeleaf模板显示图片功能
时间: 2024-10-10 15:06:30 浏览: 12
Spring Boot 中本地上传图片文件通常涉及前端表单提交、后端文件处理以及模板展示三个步骤:
1. **前端**:
使用 HTML 和 JavaScript(例如 Bootstrap 或者自定义脚本),创建一个文件输入字段让用户选择图片文件。当用户点击提交按钮时,会通过 AJAX 发送到服务器。
```html
<form th:action="@{/upload}" method="post" enctype="multipart/form-data">
<input type="file" id="imageFile" name="image">
<button type="submit">上传</button>
</form>
```
2. **后端 Spring Boot (Java)**:
创建一个控制器方法接收 `MultipartFile` 参数,这个参数表示上传的文件。然后可以将文件保存到指定目录,比如应用的 `resources/static/images/` 目录下。
```java
@PostMapping("/upload")
public String handleFileUpload(@RequestParam("image") MultipartFile image) {
if (image.isEmpty()) {
return "error";
}
try {
byte[] bytes = image.getBytes();
// 将图片保存到本地路径
File savePath = new File("src/main/resources/static/images/" + image.getOriginalFilename());
Files.write(savePath.toPath(), bytes);
return "success"; // 返回成功消息给前端
} catch (IOException e) {
e.printStackTrace();
return "error";
}
}
```
3. **Thymeleaf 模板**:
为了在 Thymeleaf 模板中显示图片,你需要提供一个 URL 地址。如果图片已上传,你可以从静态资源目录获取 URL。在渲染页面时,使用 `${...}` 表达式来动态插入图片地址。
```html
<div th:if="${success}">
<img th:src="@{/images/[${imageFileName}]}" alt="Uploaded Image"/>
</div>
```
这里假设 `success` 变量来自后端返回的状态,`imageFileName` 是存储图片时保留的文件名。