springboot完成一个线上图片存放地址+实现前后端上传图片+回显
1.路径
注意路径
2.代码:(那个imagePath没什么用,懒的删了),注意你的本地文件夹要有图片,才可以在线上地址中打开查看
package com.xxx.common.config;import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class ResourceConfigurerAdapter implements WebMvcConfigurer {@Value("${image.path}")private String imagePath;/*** 配置资源访问* @param registry*/@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/img/**").addResourceLocations("file:D:/code/img/"); //表示线上的存放的图片的来源:是D盘code下的img(所以你要做的就是将图片上传到这个本地文件夹)}}
3.然后访问就是:localhost:端口号/img/图片名称.图片后缀
4.后端上传图片到特定文件夹:
package com.xxx.common.controller;import com.xxx.common.service.UserService;
import com.xxx.common.utils.Result;
import org.apache.commons.io.FilenameUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.nio.file.Paths;
import java.util.Map;
import java.util.Random;
import java.util.UUID;@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:8888") // 允许来自前端服务器的跨域请求
public class FileUploadController {@Autowiredprivate UserService userService;//图片上传的地址private static final String UPLOAD_DIR = "D:\\code\\img";@PostMapping("/upload")public ResponseEntity<?> handleFileUpload(@RequestParam("file") MultipartFile file) {if (file.isEmpty()) {return ResponseEntity.badRequest().body("文件不能为空");}try {String originalFilename = file.getOriginalFilename();// 可以添加更多的文件名检查和清理逻辑// 注意:直接使用用户提供的文件名存在安全风险,应该添加必要的校验和清理String randomString = generateRandomString(8);System.out.println("Random String: " + randomString);File destinationFile = new File(UPLOAD_DIR, "TX_"+randomString+originalFilename);file.transferTo(destinationFile);// 返回文件名作为响应return ResponseEntity.ok().body(destinationFile.getName());} catch (IOException e) {return new ResponseEntity<>("无法保存文件", HttpStatus.INTERNAL_SERVER_ERROR);}}@PostMapping("/updateAvatar")public ResponseEntity<?> updateAvatar(@RequestBody Map<String, Object> payload) {//拿到现在的avtar的值,使用userMapper去数据表查找是否有该值,有的话就覆盖,然后提示图片已存在图片更新成功,已覆盖之前文件;如果查找不到的话就提示“第一次存入该图片”Integer userId = (Integer) payload.get("userId");String avatarName = (String) payload.get("avatar");userService.updateAvatar(userId, avatarName);return ResponseEntity.ok().body("头像更新成功");}public static String generateRandomString(int length) {String uuid = UUID.randomUUID().toString().replaceAll("-", "");Random random = new Random();StringBuilder result = new StringBuilder(length);for (int i = 0; i < length; i++) {result.append(uuid.charAt(random.nextInt(uuid.length())));}return result.toString().toUpperCase();}}
5.前端上传图片调用上面的后端的接口
6.前端回显图片:avatar是我的数据表的字段(存的是图片名称.后缀)
7.数据表
补充:
或者直接写个方法获取URL也可以获取头像
相关文章:

springboot完成一个线上图片存放地址+实现前后端上传图片+回显
1.路径 注意路径 2.代码:(那个imagePath没什么用,懒的删了),注意你的本地文件夹要有图片,才可以在线上地址中打开查看 package com.xxx.common.config;import org.springframework.beans.factory.annotat…...
编程思维与生活琐事的内在关联及其应用价值
随着科技的日益普及和信息化时代的到来,编程作为一种现代技能,其影响已不再局限于专业领域,而是逐步渗透到人们的日常生活之中。探讨编程与生活琐事之间的关系,有助于我们更好地理解如何将技术智慧应用于日常管理,提升…...

OSPF排错
目录 实验拓扑图 实验要求 实验排错 故障一 故障现象 故障分析 故障解决 故障二 故障现象 故障分析 故障解决 故障三 故障现象 故障分析 故障解决 故障四 故障现象 故障分析 故障解决 故障五 故障现象 故障分析 故障解决 故障六 故障现象 故障分析 …...

day07-CSS高级
01-定位 作用:灵活的改变盒子在网页中的位置 实现: 1.定位模式:position 2.边偏移:设置盒子的位置 left right top bottom 相对定位 position: relative 特点: 不脱标,占用自己原来位置 显示模…...

05 MP之ActiveRecord模式+SimpleQuery
1. ActiveRecord ActiveRecord(活动记录,简称AR),是一种领域模型模式,特点是一个模型类对应关系型数据库中的一个表,而模型类的一个实例对应表中的一行记录。 其目标是通过围绕一个数据对象, 进行全部的CRUD操作。 1.1 让实体类…...
git diff查看比对两次不同时间点提交的异同
git diff查看比对两次不同时间点提交的异同 用 git diff命令: git diff commit-id-1 commit-id-2 不同commit-id在不同的时间点提交产生,因为也可以认为git diff是比对两个不同时间点的代码异同。 git diff比较不同commit版本的代码文件异同_git diff c…...

基于muduo网络库开发服务器程序和CMake构建项目 笔记
跟着施磊老师做C项目,施磊老师_腾讯课堂 (qq.com) 一、基于muduo网络库开发服务器程序 组合TcpServer对象创建EventLoop事件循环对象的指针明确TcpServer构造函数需要什么参数,输出ChatServer的构造函数在当前服务器类的构造函数当中,注册处理连接的回调函数和处理…...
前端支持下载模板、导入数据、导出数据(excel格式)
前言 xlsx是由SheetJS开发的一个处理excel文件的npm库,适用于前端开发者实现下载模板、导入导出excel文件等需求,演示的项目的技术栈为vue3 elementPlus 一. 引入xlsx 安装xlsx npm install xlsx引入xlsx import * as XLSX from xlsx;二. 下载模板 const han…...
编译Faiss-gpu【InterMKL】C++ 按步骤操作 基本不会有问题的 python原理相同。
编译Faiss-gpu C++ 基本介绍 使用Faiss版本【1.7.4】 该项目依赖于BLAS 组件 OpenBLAS 和 IntelMKL BLAS 【官方支持】 IntelMKL 会比 OpenBLAS 快的多。 【来自官方结论】 本机环境 Cuda :11.1 Cuda-Driver: 515 InterMKL: 2021.2.0 Faiss :1.7.4 注意:faiss仅…...
conn.execute的用法详解
conn.execute的用法详解 大家好,我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天,我们将深入研究数据库连接中conn.execute的用法,解析它的功能、…...
GetBuffer() 与 ReleaseBuffer() 使用详解
GetBuffer() 与 ReleaseBuffer() 使用详解 大家好,我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天,我们将深入研究在编程中常用的GetBuffer()与ReleaseBuff…...

Flink CEP(基本概念)
Flink CEP 在Flink的学习过程中,我们已经掌握了从基本原理和核心层的DataStream API到底层的处理函数,再到应用层的Table API和SQL的各种手段,可以应对实际应用开发的各种需求。然而,在实际应用中,还有一类更为复…...
[AIGC] Spring Gateway与 nacos 简介
文章目录 Spring Gateway简介主要特性优点总结 Nacos简介主要特性优点总结 Spring Gateway 简介 Spring Gateway是一个基于Spring Framework的工具,用于构建和管理微服务架构中的网关。它提供了一种简单而灵活的方式来路由和过滤请求,以及在微服务之间…...

2024-2-3-复习作业
1> 要求: 效果图: 2> 要求: 效果图: 3> 要求: 效果图: 源代码: #include <stdio.h> #include <stdlib.h> typedef int datatype; typedef struct Node {datatype data…...
【如何快速上手Vue.js框架——详细介绍】
如何快速上手Vue.js框架——详细介绍 1. 介绍2. 理解Vue.js的核心概念3. 搭建开发环境4. 创建第一个项目5. 学习基础6. 进阶概念7. 最佳实践和模式8. 构建和部署9. 持续学习10. 实际操作 1. 介绍 要快速上手Vue.js框架,可以按照以下步骤进行学习和实践:…...

1Panel应用推荐:青龙定时任务管理平台
1Panel(github.com/1Panel-dev/1Panel)是一款现代化、开源的Linux服务器运维管理面板,它致力于通过开源的方式,帮助用户简化建站与运维管理流程。为了方便广大用户快捷安装部署相关软件应用,1Panel特别开通应用商店&am…...

BUUCTF-Real-[struts2]s2-013
struts2的标签中 <s:a> 和 <s:url> 都有一个 includeParams 属性,可以设置成如下值none - URL中不包含任何参数(默认) get - 仅包含URL中的GET参数 all - 在URL中包含GET和POST参数 当includeParamsall的时候,会将本次…...

【实战知识】使用Github Action + Nginx实现自动化部署
大家好啊,我是独立开发豆小匠。 先说一下背景~ 我的小程序:豆流便签,目前使用云托管部署后端服务,使用轻量级服务器部署数据库和一些中间件。 因此服务器成本:云托管 + 云服务器 云托管每周花费5元,一个月就是50,一年就是500啊,所以这期准备把云托管优化掉! 1. 需…...

web前端--------渐变和过渡
线性渐变,是指颜色沿一条直线进行渐变,例如从上到下、从左到右。 当然,CSS中也支持使用角度来设置渐变的方向,角度单位为deg。 0deg,为12点钟方向,表示从下到上渐变。 90deg,为3点钟方向&…...

docker镜像结构
# 基础镜像 FROM openjdk:11.0-jre-buster # 设定时区 ENV TZAsia/Shanghai RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone # 拷贝jar包 COPY docker-demo.jar /app.jar # 入口 ENTRYPOINT ["java", "-jar"…...

【超详细】英伟达Jetson Orin NX-YOLOv8配置与TensorRT测试
文章主要内容如下: 1、基础运行环境配置 2、Torch-GPU安装 3、ultralytics环境配置 4、Onnx及TensorRT导出详解 5、YOLOv8推理耗时分析 基础库版本:jetpack5.1.3, torch-gpu2.1.0, torchvision0.16.0, ultralytics8.3.146 设备的软件开发包基础信息 需…...

SDC命令详解:使用set_propagated_clock命令进行约束
相关阅读 SDC命令详解https://blog.csdn.net/weixin_45791458/category_12931432.html?spm1001.2014.3001.5482 目录 指定端口列表/集合 简单使用 注意事项 传播时钟是在进行了时钟树综合后,使用set_propagated_clock命令可以将一个理想时钟转换为传播时钟&#x…...
任务调度器-关于中心化调度 vs 去中心化调度的核心区别
1. 定义与架构模型 维度中心化调度去中心化调度核心角色存在一个中央调度器(如XXL-JOB的调度中心),统一管理任务分配、状态监控和故障处理。无中心节点,调度逻辑分散在多个节点,通过共识算法(如选举机制&a…...
力扣刷题(第四十九天)
灵感来源 - 保持更新,努力学习 - python脚本学习 反转链表 解题思路 迭代法:通过遍历链表,逐个改变节点的指针方向。具体步骤如下: 使用三个指针:prev(初始为None)、curr(初始为…...

从零搭建uniapp项目
目录 创建uni-app项目 基础架构 安装 uni-ui 组件库 安装sass依赖 easycom配置组件自动导入 配置view等标签高亮声明 配置uni-ui组件类型声明 解决 标签 错误 关于tsconfig.json中提示报错 关于非原生标签错误(看运气) 安装 uview-plus 组件库…...
Linux服务器如何安装wps?
1.到wps官网 https://www.wps.cn/product/wpslinux 2.到安装目录上执行命令 sudo dpkg -i wps-office*.deb 3.启动wps 在终端中输入 wps 命令即可启动 WPS...

终极数据结构详解:从理论到实践
终极数据结构详解:从理论到实践 我将从 底层原理、时间复杂度、空间优化、实际应用 和 代码实现 五个维度,彻底解析数据结构。内容涵盖: 线性结构(数组、链表、栈、队列)非线性结构(树、图)高…...
结构体和指针1
#include <iostream> using namespace std; #include <string> struct Student{ int age; string name; double score; }; int main() { //静态分配 Student s1 {18,"小明",88.5}; //cout << s1.name<<"的成绩为…...
C++.OpenGL (5/64)变换(Transformation)
变换(Transformation) 变换矩阵核心概念 #mermaid-svg-OvPP9vqkY9MRAHyd {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-OvPP9vqkY9MRAHyd .error-icon{fill:#552222;}#mermaid-svg-OvPP9vqkY9MRAHyd .error-tex…...

React - 组件通信
组件通信 概念:组件通信就是组件之间数据传递,根据组件嵌套关系不同,有不同的通信方法 父传子 —— 基础实现 实现步骤 父组件传递数据 - 在子组件标签上绑定属性子组件接收数据 - 子组件通过props参数接收数据 声明子组件并使用 //声明子…...