招聘网站开发价格,外贸论坛有哪些?,wordpress百度云网盘,网站seo优化有哪些方面Spring Boot实现图片上传和展示
本文将介绍如何使用Spring Boot框架搭建后端服务#xff0c;实现接收前端上传的图片并保存到resources/images目录下。同时#xff0c;我们还将展示如何在前端编写一个HTML页面#xff0c;实现上传图片和从resources/images目录下获取图片并…Spring Boot实现图片上传和展示
本文将介绍如何使用Spring Boot框架搭建后端服务实现接收前端上传的图片并保存到resources/images目录下。同时我们还将展示如何在前端编写一个HTML页面实现上传图片和从resources/images目录下获取图片并展示的功能。
后端实现
使用Spring Boot来快速搭建后端服务以下是实现步骤
创建Spring Boot项目并导入相关依赖。创建一个Controller类定义一个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应用后端服务即可接收并保存上传的图片。
前端实现
在前端我们将使用HTML和JavaScript来实现图片上传和展示功能。以下是一个示例HTML页面的代码
!DOCTYPE html
html
headtitle图片上传与展示/title
/head
bodyh2上传图片/h2input typefile idimageInputbutton onclickuploadImage()上传图片/buttonh2展示图片/h2div idimageContainer/divscriptfunction 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在上述代码中我们创建了一个简单的HTML页面包含一个文件选择框和一个上传按钮。当用户选择图片文件并点击上传按钮时通过JavaScript代码将选中的图片文件发送到后端的/upload接口。上传成功后调用showImage函数在页面上展示上传的图片。
请确保将该HTML文件放置在与resources目录同级的目录下。
效果展示
