当前位置: 首页 > news >正文

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目录同级的目录下。

效果展示

在这里插入图片描述

相关文章:

Spring Boot实现图片上传和展示

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

大数据-之LibrA数据库系统告警处理(ALM-37015 Gaussdb进程可用文件句柄资源不足)

告警解释 操作系统环境文件句柄不足时&#xff0c;产生该告警。 告警属性 告警ID 告警级别 可自动清除 37015 严重 是 告警参数 参数名称 参数含义 ServiceName 产生告警的服务名称 RoleName 产生告警的角色名称 HostName 产生告警的主机名 Instance 产生告警…...

大一学编程怎么学?刚接触编程怎么学习,有没有中文编程开发语言工具?

大一学编程怎么学&#xff1f;刚接触编程怎么学习&#xff0c;有没有中文编程开发语言工具&#xff1f; 1、大一刚开始学编程&#xff0c;面对复杂的代码学习非常吃力&#xff0c;很难入门。建议刚接触编程可以先学习中文编程&#xff0c;了解其中的编程逻辑&#xff0c;学编程…...

GoWeb学习-第二天

文章目录 从零开始学Go web——第二天一、安装Go语言二、建立web目录2.1 创建GO语言包目录2.2 创建Go web文件 三、编译并运行Go web应用3.1 编译并运行3.2 查看结果 从零开始学Go web——第二天 ​ 第一天我们了解了与web息息相关的HTTP协议&#xff0c;聊了聊Go与web的关系等…...

04-鸿蒙4.0学习之样式装饰器相关

04-鸿蒙4.0学习之样式装饰器 styles装饰器&#xff1a;定义组件重用样式 /*** styles装饰器&#xff1a;定义组件重用样式*/ Entry Component struct StyleUI {State message: string stylesStyles commonStyle(){.width(200).height(100).backgroundColor(Color.Gray).marg…...

C# 线程(1)

目录 1 线程与进程2 创建线程3 线程等待4 线程优先级5 前台线程与后台线程6 Lock与线程安全7 Monitor8 死锁9 线程中异常处理 1 线程与进程 进程是计算机概念&#xff0c;一个程序运用时占用的的所有计算机资源&#xff08;CPU、内存、硬盘、网络&#xff09;统称为进程。 线程…...

冒泡排序以及改进方案

冒泡排序以及改进方案 介绍&#xff1a; 冒泡排序属于一种典型的交换排序&#xff08;两两比较&#xff09;。冒泡排序就像是把一杯子里的气泡一个个往上冒一样。它不断比较相邻的元素&#xff0c;如果顺序不对就像水泡一样交换它们的位置&#xff0c;直到整个序列像水泡一样…...

QTextEdit 是 Qt 框架中的一个类,用于显示和编辑多行文本内容的可编辑部件

QTextEdit 是 Qt 框架中的一个类&#xff0c;用于显示和编辑多行文本内容的可编辑部件。 QTextEdit 提供了一个用于显示和编辑富文本&#xff08;包括格式化文本、图像和链接等&#xff09;和纯文本的文本编辑器。它支持基本的文本操作&#xff08;如复制、粘贴、撤销、重做等…...

vue+jsonp编写可导出html的模版,可通过外部改json动态更新页面内容

效果 导出后文件结果如图所示&#xff0c;点击Index.html即可查看页面&#xff0c;页面所有数据由report.json控制&#xff0c;修改report.json内容即可改变index.html展示内容 具体实现 1. 编写数据存储的json文件 在index.html所在的public页面新建report.json文件&#xff…...

查看各ip下的连接数

netstat -n | awk /^tcp/ {print $5} | awk -F: {print $1} | sort | uniq -c| sort -rn netstat -n&#xff1a;显示所有的网络连接&#xff0c;不包括任何服务名的解释。awk /^tcp/ {print $5}&#xff1a;使用awk命令过滤出tcp协议的连接&#xff0c;并打印出每个连接的第五…...

Linux—进程状态

目录 一.前言 1.1.通过系统调用获取进程标示符 1.2.通过系统调用创建进程 二.进程状态 三.Z(zombie)-僵尸进程 四.僵尸进程危害 一.前言 学习进程的状态&#xff0c;我们首先了解一下进程的基本数据 1.1.通过系统调用获取进程标示符 由getpid&#xff08;&#xff09…...

万宾科技可燃气体监测仪科技作用全览

燃气管网在运行过程中经常会遇到燃气管道泄漏的问题&#xff0c;燃气泄漏甚至会引起爆炸&#xff0c;从而威胁人民的生命和财产安全&#xff0c;因此对燃气管网进行定期巡检是十分必要的工作。但是传统的人工巡检已不能满足城市的需要&#xff0c;除了选择增加巡检人员之外&…...

Python与GPU编程快速入门(三)

3、使用Numba加速Python代码 Numba 是一个 Python 库,它使用行业标准 LLVM 编译器库在运行时将 Python 函数转换为优化的机器代码。 您可能想尝试用它来加速 CPU 上的代码。 然而,Numba还可以将Python 语言的子集转换为CUDA,这就是我们将在这里使用的。 所以我们的想法是,…...

praseInt 和 逻辑或连用

这是做项目时遇到json文件转换 的一个小坑 将json 对象中的值 由字符串(数字字符串) 转换为 数值类型&#xff0c;如果是 转换失败 &#xff0c;就返回 -1 这里的 parseInt 看起来非常简洁&#xff0c;但是存在一个小坑 transformedData[fieldsToCheck[i]] parseInt(origina…...

对属于国家秘密的地理信息的获取、持有、提供、利用情况进行登记并长期保存,实行可追溯管理

对属于国家秘密的地理信息的获取、持有、提供、利用情况进行登记并长期保存&#xff0c;实行可追溯管理 数据记录&#xff08;包括获取、持有、提供、利用、销毁等全闭环&#xff09;...

XAER_RMERR: Fatal error occurred in the transaction branch异常解决

XAER_RMERR: Fatal error occurred in the transaction branch异常解决 数据库权限问题&#xff01;&#xff01;&#xff01;不是mysql驱动问题&#xff0c;执行下面命令解决 GRANT XA_RECOVER_ADMIN ON *.* TO root% ;...

Redis面试常见问题

Redis中的Lua脚本到底能不能保证原子性&#xff1f; Redis中Lua脚本的执行&#xff0c;可以保证并发编程中不可再拆分的这个原子性&#xff0c;但是没有保证数据库ACID中要么都执行要么都回滚的这个原子性。Lua脚本执行过程中命令产生错误&#xff0c;是不会回滚的&#xff0c…...

浏览器触发下载Excel文件-Java实现

目录 1:引入maven 2:代码实现 3.导出通讯录信息到Excel文件 4.生成并下载Excel文件部分解释 1:引入maven 添加依赖:首先,在你的项目中添加EasyExcel库的依赖。你可以在项目的构建文件(如Maven的pom.xml)中添加以下依赖项:<dependency><groupId>com.alib…...

每日汇评:黄金在上涨趋势恢复之前面临修正性回调的风险

周三早些时候&#xff0c;金价触及六个月来的最高水平&#xff0c;接近 2050 美元&#xff1b; 在美联储转向鸽派立场后&#xff0c;美元和美债双双下跌&#xff1b; 日线图上的超买RSI指标警示多头&#xff0c;但即将到来的金十字图形使上行保持不变&#xff1b; 金价在周三亚…...

【开源】基于Vue.js的大学计算机课程管理平台的设计和实现

项目编号&#xff1a; S 028 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S028&#xff0c;文末获取源码。} 项目编号&#xff1a;S028&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

解析“道作为序位生成器”的核心原理

解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制&#xff0c;重点解析"道作为序位生成器"的核心原理与实现框架&#xff1a; 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...