可以给我一个JavaScript基于springboot的查看已上传图片的代码吗
时间: 2024-04-20 16:22:46 浏览: 127
当然,以下是一个基于Spring Boot的示例代码,用于查看已上传图片:
首先,确保你已经设置好了Spring Boot项目的环境,并且已经包含了相关的依赖(如Spring MVC、Thymeleaf等)。
1. 创建一个名为`ImageController`的控制器类:
```java
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ImageController {
// 设置图片存储路径
@Value("${image.upload.path}")
private String imageUploadPath;
@GetMapping("/images")
public String viewImages(Model model) {
File imageDirectory = new File(imageUploadPath);
if (imageDirectory.exists() && imageDirectory.isDirectory()) {
File[] imageFiles = imageDirectory.listFiles();
model.addAttribute("images", imageFiles);
}
return "images";
}
}
```
2. 创建一个名为`images.html`的Thymeleaf模板文件,用于显示已上传的图片:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>查看已上传图片</title>
<meta charset="UTF-8">
</head>
<body>
<h1>已上传的图片列表</h1>
<div th:each="image : ${images}">
<img th:src="@{'/images/' + ${image.name}}" alt="" style="max-width: 100px; height: auto;">
</div>
</body>
</html>
```
3. 在`application.properties`(或`application.yml`)配置文件中,添加图片存储路径的配置:
```properties
image.upload.path=/path/to/uploaded/images/
```
4. 在Spring Boot的启动类上添加`@EnableWebMvc`注解,以启用Spring MVC的相关功能。
```java
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
@SpringBootApplication
@EnableWebMvc
public class YourApplication {
public static void main(String[] args) {
SpringApplication.run(YourApplication.class, args);
}
}
```
这样,当访问`/images`路径时,将会调用`ImageController`的`viewImages`方法,获取图片存储路径下的所有文件,并将其传递给Thymeleaf模板进行渲染,最终显示已上传的图片列表。
请注意,代码中的图片存储路径需要根据你的实际情况进行修改,确保它与你上传图片的存储路径相匹配。此外,你还可以根据需要进行样式和布局的调整。
阅读全文