Spring Boot實(shí)現(xiàn)圖片上傳和展示
本文將介紹如何使用Spring Boot框架搭建后端服務(wù)，實(shí)現(xiàn)接收前端上傳的圖片并保存到resources/images目錄下。同時(shí)，我們還將展示如何在前端編寫一個(gè)HTML頁面，實(shí)現(xiàn)上傳圖片和從resources/images目錄下獲取圖片并展示的功能。
后端實(shí)現(xiàn)
使用Spring Boot來快速搭建后端服務(wù)，以下是實(shí)現(xiàn)步驟：
- 創(chuàng)建Spring Boot項(xiàng)目并導(dǎo)入相關(guān)依賴。
- 創(chuàng)建一個(gè)Controller類，定義一個(gè)POST請求接口用于接收上傳的圖片，并將其保存到
resources/images目錄下。代碼示例：
@RestController
public class ImageUploadController {
@Value("${upload.path}")
private String uploadPath;
@PostMapping("/upload")
public String uploadImage(@RequestParam("file") MultipartFile file) {
try {
// 獲取文件名
String fileName = file.getOriginalFilename();
// 指定保存路徑
String filePath = uploadPath + "/" + fileName;
// 保存文件到本地
file.transferTo(new File(filePath));
return "上傳成功";
} catch (IOException e) {
e.printStackTrace();
return "上傳失敗";
}
}
}
在上述代碼中，我們使用@Value注解注入了文件保存路徑uploadPath，該路徑配置在application.properties或application.yml文件中。
- 啟動Spring Boot應(yīng)用，后端服務(wù)即可接收并保存上傳的圖片。
前端實(shí)現(xiàn)
在前端，我們將使用HTML和JavaScript來實(shí)現(xiàn)圖片上傳和展示功能。以下是一個(gè)示例HTML頁面的代碼：
<!DOCTYPE html>
<html>
<head>
<title>圖片上傳與展示</title>
</head>
<body>
<h2>上傳圖片</h2>
<input type="file" id="imageInput">
<button onclick="uploadImage()">上傳圖片</button>
<h2>展示圖片</h2>
<div id="imageContainer"></div>
<script>
function uploadImage() {
var fileInput = document.getElementById('imageInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(result => {
if (result === '上傳成功') {
showImage(file.name);
} else {
console.log('上傳失敗');
}
})
.catch(error => console.error('Error:', error));
}
function showImage(fileName) {
var imageContainer = document.getElementById('imageContainer');
var imgElement = document.createElement('img');
imgElement.src = 'resources/images/' + fileName;
imageContainer.appendChild(imgElement);
}
</script>
</body>
</html>
在上述代碼中，我們創(chuàng)建了一個(gè)簡單的HTML頁面，包含一個(gè)文件選擇框和一個(gè)上傳按鈕。當(dāng)用戶選擇圖片文件并點(diǎn)擊上傳按鈕時(shí)，通過JavaScript代碼將選中的圖片文件發(fā)送到后端的/upload接口。上傳成功后，調(diào)用showImage函數(shù)，在頁面上展示上傳的圖片。
請確保將該HTML文件放置在與resources目錄同級的目錄下。文章來源：http://www.zghlxwxcb.cn/news/detail-803237.html
效果展示
文章來源地址http://www.zghlxwxcb.cn/news/detail-803237.html
到了這里，關(guān)于Spring Boot實(shí)現(xiàn)圖片上傳和展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
