记录解决springboot项目上传图片到本地,在html里不能回显的问题

项目场景:

项目场景:在我的博客系统里:有个相册模块:需要把图片上传到项目里,在html页面上显示
在这里插入图片描述
在这里插入图片描述


解决方案

1.建一个文件夹

例如在windows系统下。可以在项目根目录下建个photos文件夹,把上传的图片文件保存到这个文件夹里
在这里插入图片描述

2.实现WebMvcConfigurer

重写addResourceHandlers方法

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {@Value("${uploadLinuxTempFilePath}")private String linuxUploadPath;/*** 解决上传图片后不能立即访问到(回显)的问题* */@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {// http://localhost//upload_img/photos/1720864412594.png// 访问上传到本地的图片String path;String os = System.getProperty("os.name");if(os.startsWith("Windows")){path = System.getProperty("user.dir")+"/photos/";}else {path = linuxUploadPath;}// 例如访问http://111.229.128.4:80//upload_img/1720877954983.jpg// 只要匹配到/upload_img/路径,springmvc会自动映射到你建的 path  路径下registry.addResourceHandler("/upload_img/**").addResourceLocations("file:"+path);}

3.保存到表里的文件路径

我这个是保存到linux上,所以ip是我的服务器ip
在这里插入图片描述
如果是上传到你的windows电脑上, ip就是127.0.0.1

4.附上传图片的代码

package com.lizhenqiang.myblog.util;import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;@Service
@Slf4j
public class UploadFileUtil {@Value("${uploadLinuxTempFilePath}")private String linuxUploadPath;@Value("${server.port}")private int port;@Value("${linuxIP}")private String linuxIp;public String uploadFileToLocal(MultipartFile file) {// [1] 获取项目目录// http://localhost//upload_img/1720864412594.pnglog.info("[开始] 拼接保存到本地的完整文件路径");String userDir = System.getProperty("user.dir");// [2] 在项目目录下新建一个文件夹String targetDir = "/photos/";// [3] 获取文件后缀String originalFilename = file.getOriginalFilename();String[] split = originalFilename.split("\\.");String suffix = split[1];// [4] 组装完整文件路径String fileName =  System.currentTimeMillis()+ "." +suffix;String filePath;String prefixIp;String os = System.getProperty("os.name");if(os.startsWith("Windows")){filePath = userDir + targetDir + fileName;prefixIp = "http://127.0.0.1:"+port+"//upload_img/";}else {filePath = linuxUploadPath + fileName ;prefixIp = "http://"+linuxIp+":"+port+"//upload_img/";}// [4.1] 判断路径是否存在, 如果不存在则创建this.createDirectoryIfNotExits(filePath);log.info("[结束] 拼接保存到本地的完整文件路径, 文件路径 [{}]", filePath);// [5] 获取输入流、创建输出流log.info("[开始] 复制文件到本地, 文件路径 [{}]", filePath);try (InputStream inputStream = file.getInputStream();FileOutputStream outputStream = new FileOutputStream(filePath)) {// [6] 从输入流读, 往输出流写int readBytes;byte[] bytes = new byte[1024];while ((readBytes = inputStream.read(bytes)) != -1) {outputStream.write(bytes, 0, readBytes);}// [7] 刷新输出流outputStream.flush();log.info("[结束] 复制文件到本地, 文件路径 [{}]", filePath);// [8] 返回文件完整路径return prefixIp+ fileName;} catch (IOException e) {log.info("[失败] 复制文件到本地, 文件路径 [{}], 异常信息 [{}]", filePath, e.getMessage());throw new RuntimeException("复制文件到本地失败");}}/*** 判断文件路径是否存在, 不存在则创建** @param path 文件完整路径*/public void createDirectoryIfNotExits(String path) {/*逻辑:1. 判断是否是文件夹, 如果是文件夹, 在判断文件夹是否存在, 不存在则创建2. 如果不是文件夹, 就获取它的目录, 不存在则创建*/// [1] 判断是否是文件夹, 如果是文件夹, 在判断文件夹是否存在, 不存在则创建File file = new File(path);if (file.isDirectory()) {if (!file.exists()) {file.mkdirs();}} else {// [2] 如果不是文件夹, 就获取它的目录, 不存在则创建File parentFile = file.getParentFile();if (!parentFile.exists()) {parentFile.mkdirs();}}}}

5.欢迎访问我的博客系统

基于Java(Springboot)可以用做毕业设计的个人博客系统,包括网站前台和后台管理系统两部分。网站前台包括首页、归档页面、相册页面、留言页面、关于我页面。支持用户注册与登录,注册时使用邮箱发送验证码。
后台管理系统包括写博客、管理博客。对分类、标签、相册、用户的增删改查。还有对访客的记录。

网站链接 前台: http://111.229.128.4/
后台: http://111.229.128.4/admin
用户名/密码:admin/admin
前端框架:Layui
后端:Springboot
数据库:MySQL,redis

欢迎访问!

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

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

相关文章

[PM]产品运营

生命周期 运营阶段 主要工作 拉新 新用户的定义 冷启动 拉新方式 促活 用户活跃的原因 量化活跃度 运营社区化/内容化 留存 用户流失 培养用户习惯 用户挽回 变现 变现方式 付费模式 广告模式 数据变现 变现指标 传播 营销 认识营销 电商营销中心 拼团活动 1.需求整理 2.…

JMeter请求导出Excel

前言 今天记录一个使用JMeter模拟浏览器请求后端导出,并下载Excel到指定位置的过程 创建请求 同样先创建一个线程组,再创建一个请求,设置好请求路径,端口号等 查看结果树 右键--添加--监听器--查看结果树 这里可以查看&#…

VUE之---slot插槽

什么是插槽 slot 【插槽】, 是 Vue 的内容分发机制, 组件内部的模板引擎使用slot 元素作为承载分发内容的出口。slot 是子组件的一个模板标签元素, 而这一个标签元素是否显示, 以及怎么显示是由父组件决定的。 VUE中slot【插槽】…

详细讲解vue3 watch回调的触发时机

目录 Vue 3 watch 基本用法 副作用刷新时机 flush 选项 flush: pre flush: post flush: sync Vue 3 watch 基本用法 计算属性允许我们声明性地计算衍生值。然而在有些情况下,我们需要在状态变化时执行一些“副作用”:例如更改 DOM,或是…

display: flex 和 justify-content: center 强大居中

你还在为居中而烦恼吗,水平居中多个元素、创建响应式布局、垂直和水平同时居中内容。它,display: flex 和 justify-content: center 都可以完成! display: flex:将元素定义为flex容器 justify-content:定义项目在主轴…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] LYA的生日派对座位安排(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线…

FairGuard游戏加固入选《嘶吼2024网络安全产业图谱》

2024年7月16日,国内网络安全专业媒体——嘶吼安全产业研究院正式发布《嘶吼2024网络安全产业图谱》(以下简称“产业图谱”)。 本次发布的产业图谱,共涉及七大类别,127个细分领域。全面展现了网络安全产业的构成和重要组成部分,探…

Ant Design Vue中日期选择器快捷选择 presets 用法

ant写文档的纯懒狗 返回的是一个day.js对象 范围选择时可接受一个数组 具体参考 操作 Day.js 话不多说 直接上代码 <a-range-pickerv-model:value"formData.datePick"valueFormat"YYYY-MM-DD HH:mm:ss"showTime:presets"presets"change&quo…

【机器学习】模型验证曲线(Validation Curves)解析

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 模型验证曲线(Validation Curves)解析什么是模型验证曲线?模型验证曲线的解读模…

揭秘!电源炼成记:从基础原理到高端设计的全面解析

文章目录 初始构想&#xff1a;需求驱动设计原理探索&#xff1a;选择适合的拓扑结构精细设计&#xff1a;元器件选型与布局环路稳定&#xff1a;控制策略与补偿网络严格测试&#xff1a;验证与优化持续改进&#xff1a;创新与技术迭代《硬件十万个为什么&#xff08;电源是怎样…

《Linux运维总结:基于ARM64架构CPU使用docker-compose一键离线部署单机版tendis2.4.2》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、部署背景 由于业务系统的特殊性&#xff0c;我们需要面对不同的客户部署业务系统&#xff0…

单周期CPU(三)译码模块(minisys)(verilog)(vivado)

timescale 1ns / 1ps //module Idecode32 (input reset,input clock,output [31:0] read_data_1, // 输出的第一操作数output [31:0] read_data_2, // 输出的第二操作数input [31:0] Instruction, // 取指单元来的指令input [31:0] …

邮件安全篇:企业电子邮件安全涉及哪些方面?

1. 邮件安全概述 企业邮件安全涉及多个方面&#xff0c;旨在保护电子邮件通信的机密性、完整性和可用性&#xff0c;防止数据泄露、欺诈、滥用及其他安全威胁。本文从身份验证与防伪、数据加密、反垃圾邮件和反恶意软件防护、邮件内容过滤与审计、访问控制与权限管理、邮件存储…

MATLAB基础:字符串、元胞数组

今天我们继续学习MATLAB中的字符串、元胞和结构 字符串 由于MATLAB是面向矩阵的&#xff0c;所以字符串的处理可以用矩阵的形式实现 字符串的赋值与引用 假设变量a&#xff0c;将用单引号引起来的字符串赋值给它&#xff0c; a清心明目, b(a[4;-1;1]) 在这里&#xff0c;…

web每日一练

每日一题 每天一题罢了。。 ctfshow内部赛签到 扫到备份文件 login.php <?php function check($arr){ if(preg_match("/load|and|or|\||\&|select|union|\|| |\\\|,|sleep|ascii/i",$arr)){echo "<script>alert(bad hacker!)</script>&q…

Lua 语法学习笔记

Lua 语法学习笔记 安装(windows) 官网&#xff1a;https://www.lua.org/ 下载SDK 解压&修改名称&#xff08;去除版本号&#xff09; 将lua后面的版本号去掉&#xff0c;如lua54.exe->lua.ext 配置环境变量 数据类型 数据类型描述nil这个最简单&#xff0c;只有值n…

【safari】react在safari浏览器中,遇到异步时间差的问题,导致状态没有及时更新到state,引起传参错误。如何解决

在safari浏览器中&#xff0c;可能会遇到异步时间差的问题&#xff0c;导致状态没有及时更新到state&#xff0c;引起传参错误。 PS&#xff1a;由于useState是一个普通的函数&#xff0c; 定义为() > void;因此此处不能用await/async替代setTimeout&#xff0c;只能用在返…

自动驾驶---视觉Transformer的应用

1 背景 在过去的几年&#xff0c;随着自动驾驶技术的不断发展&#xff0c;神经网络逐渐进入人们的视野。Transformer的应用也越来越广泛&#xff0c;逐步走向自动驾驶技术的前沿。笔者也在博客《人工智能---什么是Transformer?》中大概介绍了Transformer的一些内容&#xff1a…

el-image 使用静态资源,通过遍历展示多图

关键代码&#xff1a;&#xff08;通过v-for 遍历获取&#xff09; <div v-for"item in projectCase" :key"item.id" class"block" click"aa(item)" :iditem.className><el-image :srcitem.url:fit"fit":preview-…

go-kratos 学习笔记(2) 创建api

proto 声明SayHi 先删除go.mod 从新初始化一下 go mod init xgs_kratosgo mod tidy 编辑 api/helloword/v1/greeter.proto 新声明一个方法 rpc SayHi (HelloHiRequest) returns (HelloHiReply) {option (google.api.http) {post: "/hi"body: "*"};} …