Spring Boot实现图片上传和展示

Spring Boot实现图片上传和展示

本文将介绍如何使用Spring Boot框架搭建后端服务,实现接收前端上传的图片并保存到resources/images目录下。同时,我们还将展示如何在前端编写一个HTML页面,实现上传图片和从resources/images目录下获取图片并展示的功能。

后端实现

使用Spring Boot来快速搭建后端服务,以下是实现步骤:

  1. 创建Spring Boot项目并导入相关依赖。
  2. 创建一个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.propertiesapplication.yml文件中。

  1. 启动Spring Boot应用,后端服务即可接收并保存上传的图片。

前端实现

在前端,我们将使用HTML和JavaScript来实现图片上传和展示功能。以下是一个示例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>

在上述代码中,我们创建了一个简单的HTML页面,包含一个文件选择框和一个上传按钮。当用户选择图片文件并点击上传按钮时,通过JavaScript代码将选中的图片文件发送到后端的/upload接口。上传成功后,调用showImage函数,在页面上展示上传的图片。

请确保将该HTML文件放置在与resources目录同级的目录下。

效果展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/228258.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Fabric:搭建自定义网络

Hyperledger Fabric: V2.5.4 写在最前 从本篇博客开始&#xff0c;将陆续介绍使用Fabric搭建自定义网络及部署执行链码的过程。本篇主要介绍如何搭建网络。   由于前文在安装Fabric的时候&#xff0c;已经将目录fabric-samples/bin加入到了环境变量PATH中&#xff0c;所以正文…

【C++初阶】五、类和对象(日期类的完善、流运算符重载函数、const成员、“”取地址运算符重载)

相关代码gitee自取&#xff1a; C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 【C初阶】四、类和对象 &#xff08;构造函数、析构函数、拷贝构造函数、赋值运算符重载函数&#xff09;-CSDN博客 一 . 日期类的完善 此次日期类的成员函数&#xff0c;采用声明…

C#开发的OpenRA游戏之属性SelectionDecorations(12)

C#开发的OpenRA游戏之属性SelectionDecorations(12) 前面分析了显示选择框的指示器类SelectionBoxAnnotationRenderable,它的作用就是画一个四个角的方角。 这个类是在属性SelectionDecorations里调用的,如下: protected override IEnumerable<IRenderable> Rende…

sed应用

一.sed 1.Sed概述 sed编辑器时一种流编辑器&#xff0c;流编辑器会在编辑器处理数据之前基于预先提供的一组规则来编辑数据流。 sed编辑器可以根据命令来处理数据流中的数据&#xff0c;这些命令要么从命令行中输入&#xff0c;要存储在一个命令文本文件中。 2.sed命令的格…

计网Lesson3 - 计算机网络评价指标与封包解包

文章目录 计算机网络的性能指标1. 速率2. 带宽3. 吞吐量4. 时延5. 时延带宽积6. 往返时间7. 利用率8. 数据的解包和封包 计算机网络的术语实体![实体](https://img-blog.csdnimg.cn/direct/cbf4ca9ed5ab4df290b5a17b4642c6a1.png)协议服务 计算机网络的性能指标 1. 速率 数据…

MagicPipe3D地下管网三维建模数据规格

经纬管网建模系统MagicPipe3D&#xff08;www.magic3d.net&#xff09;本地离线参数化构建三维地下管网&#xff08;含管道、接头、附属物等&#xff09;模型&#xff0c;输出标准3DTiles、Obj等格式&#xff0c;支持Cesium、Unreal、Unity等引擎可视化查询。MagicPipe3D三维建…

戴尔科技推出全新96核Precision 7875塔式工作站

工作站行业一直是快节奏且充满惊喜的。在过去25年中,戴尔Precision一直处于行业前沿,帮助创作者、工程师、建筑师、研究人员等将想法变为现实,并对整个世界产生影响。工作站所发挥的作用至关重要,被视为化不可能为可能的必要工具。如今,人工智能(AI)和生成式AI(GenAI)的浪潮正在…

坚鹏:贵州银行西南财经大学零售业务数字化转型与场景营销策略

中国银保监会2022年1月正式发布了中国银保监会发布《关于银行业保险业数字化转型的指导意见》&#xff0c;这标准着中国银行业从局部的数字化转型向全面的数字化转型转变&#xff0c;进一步加速了银行数字化转型高潮的到来。 《关于银行业保险业数字化转型的指导意见》提出明确…

figma 基础使用——准备阶段

1. 注册账号 2. figma有客户端也有网页端&#xff0c;使用注意同步字体 之后点击下载window installeer 字体 3. 安装 Figma汉化包 通过figma.cool 网站&#xff0c;下载离线的汉化包 之后通过谷歌的扩展程序添加

直播场景视频和特效解决方案

直播已经成为企业与消费者互动的重要方式&#xff0c;如何提供优质的直播内容&#xff0c;提升直播效果&#xff0c;以及实现直播内容的商业化转化&#xff0c;一直是企业面临的重要挑战。为此&#xff0c;美摄科技提供了一套全面的直播场景解决方案&#xff0c;帮助企业解决这…

【链接MySQL】教你用VBA链接MySQL数据库

hi&#xff0c;大家好呀&#xff01; 之前呢&#xff0c;给大家分享过一个自制链接表管理器的文章&#xff0c;文章中有链接SQL Server数据库的代码&#xff0c;大家对这一段代码比较有兴趣&#xff0c;既然大家有兴趣&#xff0c;那我们今天就来讲一下链接数据库的代码。 这…

六、Lua运算符

文章目录 一、Lua 运算符&#xff08;一&#xff09;算术运算符&#xff08;二&#xff09;关系运算符&#xff08;三&#xff09;逻辑运算符&#xff08;四&#xff09;其他运算符 二、运算符优先级 一、Lua 运算符 运算符是一个特殊的符号&#xff0c;用于告诉解释器执行特定…