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

springboot+vue上传图片

这里是一个简单的示例,演示了如何在Spring Boot中从Vue.js上传图像:

1.前端Vue.js代码:

<template><div><input type="file" @change="handleFileUpload"><button @click="uploadImage">上传图片</button></div>
</template><script>
export default {name: 'ImageUploader',data() {return {imageFile: null,imageUrl: ''};},methods: {handleFileUpload(event) {this.imageFile = event.target.files[0];},uploadImage() {let formData = new FormData();formData.append('image', this.imageFile);axios.post('/api/image/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {this.imageUrl = response.data.imageUrl;});}}
};
</script>
  1. 后端Spring Boot代码:
@RestController
public class ImageController {@Value("${upload.path}")private String uploadPath;@PostMapping("/api/image/upload")public ResponseEntity<?> uploadImage(@RequestParam("image") MultipartFile file) {Map<String, Object> response = new HashMap<>();try {if (!file.isEmpty()) {String fileName = file.getOriginalFilename();Path filePath = Paths.get(uploadPath + "/" + fileName);Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);String imageUrl = "/api/image/" + fileName;response.put("imageUrl", imageUrl);} else {response.put("status", "error");response.put("message", "No file uploaded");return ResponseEntity.badRequest().body(response);}} catch (IOException e) {response.put("status", "error");response.put("message", e.getMessage());return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);}response.put("status", "success");return ResponseEntity.ok(response);}@GetMapping("/api/image/{fileName:.+}")public ResponseEntity<Resource> getImage(@PathVariable String fileName) throws IOException {Path filePath = Paths.get(uploadPath + "/" + fileName);Resource resource = new UrlResource(filePath.toUri());return ResponseEntity.ok().contentType(MediaType.IMAGE_JPEG).body(resource);}
}

这是一个非常简单的示例,涵盖了从Vue.js前端上传一个图像并将其保存到Spring Boot后端服务器的全部过程。你可以根据实际需求进行修改和扩展。

相关文章:

springboot+vue上传图片

这里是一个简单的示例&#xff0c;演示了如何在Spring Boot中从Vue.js上传图像&#xff1a; 1.前端Vue.js代码&#xff1a; <template><div><input type"file" change"handleFileUpload"><button click"uploadImage">…...

高压电缆护层接地环流及温度在线监测系统

高压电缆的金属护层是电缆的重要组成部分&#xff0c;当缆芯通过电流时&#xff0c;会在金属护层上产生环流&#xff0c;外护套的绝缘状态差、接地不良、金属护层接地方式不正确等等都会引起护套环流异常现象&#xff0c;严重威胁电缆运行安全。 当电缆金属护层环流出现异常时…...

无涯教程-JavaScript - IPMT函数

描述 IPMT函数根据定期,固定的还款额和固定的利率返回给定投资期限内的利息支付。 语法 IPMT (rate, per, nper, pv, [fv], [type])争论 Argument描述Required/OptionalRateThe interest rate per period.RequiredPerThe period for which you want to find the interest a…...

【EI会议征稿】第三届机械自动化与电子信息工程国际学术会议(MAEIE 2023)

第三届机械自动化与电子信息工程国际学术会议&#xff08;MAEIE 2023&#xff09; 第三届机械自动化与电子信息工程国际学术会议&#xff08;MAEIE 2023&#xff09;将于2023年12月15-17日在江苏南京举行。本会议通过与业内众多平台、社会各团体协力&#xff0c;聚集机械自动…...

手写实现LRN局部响应归一化算子

1、重写算子的需求 芯片推理过程中遇到很多算子计算结果不对的情况&#xff0c;原因是封装的算子会在某些特殊情况下计算超限&#xff0c;比如输入shape特别大或者数值特别大时&#xff0c;LRN算子计算会出现NAN值&#xff0c;所以需要重写算子。先对输入数据做一个预处理&…...

朗思科技数字员工通过统信桌面操作系统兼容性互认认证

近日&#xff0c;朗思科技数字员工与统信桌面操作系统V20进行了兼容互认&#xff0c;针对上述产品的功能、兼容性方面&#xff0c;通过共同严格测试表明——朗思科技数字员工在统信桌面操作系统 V20上整体运行稳定&#xff0c;满足功能及兼容性测试要求。 北京朗思智能科技有限…...

十六、Webpack常见的插件和模式

一、认识插件Plugin Webpack的另一个核心是Plugin&#xff0c;官方有这样一段对Plugin的描述&#xff1a; While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset m…...

ChatGPT新增超强插件:文本直接生成视频、海报,支持自定义修改!

全球著名在线设计平台Canva&#xff0c;在ChatGPT Plus&#xff08;GPT-4&#xff09;上推出了插件功能&#xff0c;用户通过文本提示&#xff0c;几秒钟就能生成演示文稿、PPT插图、电子书封面、宴会邀请函等各种精美设计海报&#xff0c;同时支持生成视频。 该插件最强大的功…...

亚像素边缘提取的例子

求帮忙下载&#xff1a; 1.http://download.csdn.net/detail/pkma75/925394 pkma75 资源积分&#xff1a;1分 备注&#xff1a;pdf格式&#xff0c;用曲线拟合的方法计算亚像素&#xff0c;编程易实现&#xff0c;具有较强的实用价值 2.http://download.csdn.net/detail/kua…...

Wayland:推动Linux桌面进入下一代图形显示时代

文章首发地址 Wayland是Linux系统下的一种图形显示协议&#xff0c;旨在替代X Window System&#xff08;X11&#xff09;作为Linux桌面环境的图形显示服务。下面是对Wayland的详细解释&#xff1a; 背景&#xff1a; 传统的Linux桌面环境使用X Window System&#xff08;X11&…...

mysql外键(foreign key)

简介 MySQL的外键约束用来在两个表数据之间建立链接&#xff0c;其中一张表的一个字段被另一张表中对应的字段约束。也就是说&#xff0c;设置外键约束至少要有两种表&#xff0c;被约束的表叫做从表&#xff08;子表&#xff09;&#xff0c;另一张叫做主表&#xff08;父表&…...

内网穿透——Windows搭建服务器

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中&#xff0c;观看视频绝对是主力应用场景之一&…...

UE5.1 + Android 环境搭建

官方文档&#xff1a;一定一定一定要参照官方文档&#xff0c;因UE不同版本对应的环境搭建并不完全一致。 准备工作 通过EpicGameLaunch下载Android目标平台。 必须安装jdk1.8并配置环境变量&#xff0c;UE5.1不要使用最新的jdk20&#xff1b;下载地址 安装 Android Studio …...

华为python面试题目

华为Python常见的面试问题包括: Python是如何被解释的?什么是PEP8?Python是怎样管理内存的?什么是Python装饰器?Python提供哪些内置类型?Python中的异常处理是怎样的?什么是Python的上下文管理器?Python中的列表推导式是什么?Python中的生成器是什么?什么是Python的装…...

IP代理安全吗?如何防止IP被限制访问?

你是否遇到过可以正常上网&#xff0c;但访问某个网站却被禁止&#xff1f;注册某个网站账号&#xff0c;却被封号&#xff1f;那都是因为IP出现问题&#xff01;您的IP地址透露很多关于您的信息&#xff0c;包括您的位置和互联网活动。 在本文中&#xff0c;我们将一起了解IP地…...

使用 gst-template 创建自己的 gstreamer 插件

系列文章目录 创建 gstreamer 插件的几种方式 使用 gst-template 创建自己的 gstreamer 插件 使用 gst-plugins-bad 里面的 gst-element-maker 工具创建gstreamer 插件 文章目录 系列文章目录前言一、如何获取 gst-template 仓库代码二、gst-template 相关的软件依赖1. 根据自…...

nginx反向代理,用户访问服务器1的80端口,请求转发至服务器2,3的8882端口

两台应用服务器&#xff0c;一台nginx&#xff0c;用户访问nginx服务器80端口&#xff0c;将请求转发至服务器2和服务器3的8882端口。 1、修改nginx配置文件 upstream backend {server 10.60.16.187:8882;server 10.60.16.188:8882;}server {listen 80;server_name 10.6…...

Python学习笔记:导入txt、xlsx文件并做简单函数处理

1.txt文件 1.1路径 file_path "E:\Python Project\temp.txt" with open(file_path) as f:content1 f.read() 导入文件时&#xff0c;如果直接放文件绝对路径上去会报错&#xff0c;这是因为\P是转义字符 所以在绝对路径前面加r可以避免将引号内的内容识别成转义…...

uniapp 轮播列表左右滑动,滑动到中间放大

html <!-- 轮播 --><view class"heade"><swiper class"swiper" display-multiple-items3 circulartrue previous-margin1rpxnext-margin1rpx current0 change"swiperChange" ><block v-for"(item,index) in list"…...

5. 自动求导

5.1 向量链式法则 ① 例子1是一个线性回归的例子&#xff0c;如下图所示。 5.2 自动求导 5.3 计算图 5.4 两种模型 ① b是之前计算的结果&#xff0c;是一个已知的值。 5.5 复杂度 5.6 自动求导 import torch x torch.arange(4.0) x 结果&#xff1a; ② 在外面计算y关于x的…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

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 &…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...