springboot2实现图片文件上传与mysql存储路径并回显

环境介绍

技术栈

springboot+mybatis+mysql

软件

版本

mysql

8

IDEA

IntelliJ IDEA 2022.2.1

JDK

1.8

Spring Boot

2.7.13

mybatis

2.3.1

springboot是基于spring 4.0,springboot2是基于spring5.0,springboot2由pivotal公司在2018发布,这个框架主要用来简化ssm开发,核心思想“约定大于配置”。

上传图片,数据库存储图灵路径,但前端页面无法显示图片的问题有

1、windos与linux的路径不同

2、mysql存储路径的长度不够

前端界面

 <form id="form-changeAvatar"
     class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-md-2 control-label">选择图片:</label>
      <div class="col-md-5">
         <img id="img-avatar" src="../images/index/user.jpg" class="img-responsive" />
      </div>
      <div class="clearfix"></div>
      <div class="col-md-offset-2 col-md-4">
         <input type="file" name="file">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <input id="btn-changeAvatar" type="button" class="btn btn-primary" value="上传" />
      </div>
   </div>
</form>

前端ajax

<script type="text/javascript">$(document).ready(function (){let avatar = $.cookie("avatar");console.log(avatar);$("#img-avatar").attr("src",avatar);});//监听注册按钮$("#btn-changeAvatar").click(function () {//发送ajax()的异步请求来完成用户的登入功能$.ajax({url: "/boot/users/changeAvatar",type: "POST",data: new FormData($("#form-changeAvatar")[0]),processData: false,//处理数据的形式,关闭处理数据contentType: false,    //提交数据的形式,关闭处理的形式dataType: "JSON",success: function (json){if (json.state == 200){alert("头像修改成功");//将服务器端返回的头像地址设置img标签上的path地址//attr(属性,属性值):给某个属性设置某个值$("#img-avatar").attr("src",json.data)location.href ="../web/upload.html";}else {alert("头像修改失败,请重新再试!");}},error: function (xhr){alert("头像修改产生未知的错误!"+xhr.message);}});});
</script>

或者

$(document).ready(function () {
                //发送ajax()的异步请求来完成用户的登入功能
                $.ajax({
                    url: "/WMS/products/getImageAvatar",
                    type: "get",
                    dataType: "JSON",
                    success: function (json){
                            alert("头像修改成功");
                        $("#img-avatar").attr("src",json.avatar);
                    },
                    error: function (xhr){
                        alert("图片修改产生未知的错误!"+xhr.message);
                    }
                });
            });

controller控制层

@RequestMapping("/changeAvatar")
public JsonResult<String> changeAvatar(HttpSession session,@RequestParam("file") MultipartFile file){//判断文件是否为空if(file.isEmpty()){throw new FileEmptyException("文件为空");}//文件大小判断if (file.getSize() > AVATAR_MAX_SIZE){throw new FileSizeException("文件超出限制");}//判断文件类型String fileType = file.getContentType();if (!AVATAR_TYPE.contains(fileType)){throw new FileTypeException("文件类型不支持");}//获取绝对路径String parent = new File("static/images/wms").getAbsolutePath();File dir = new File(parent);if (!dir.exists()){dir.mkdirs();//创建当前的目录}//获取文件名称,UUID工具生成新的字符串作为文件名String originalFilename = file.getOriginalFilename();System.out.println("originalFilename原始文件路径:"+originalFilename);int index = originalFilename.lastIndexOf(".");String suffix = originalFilename.substring(index);String newFileName = UUID.randomUUID().toString().toUpperCase()+suffix;File dest = new File(dir,newFileName);//空文件try {//将参数file文件中的数据写入到dest文件中file.transferTo(dest);} catch (IOException e) {throw new FileIOException("文件写入异常");}Integer uid = getUidFromSession(session);String uname =getUserNameFromSession(session);String avatar = "../images/wms/"+newFileName;userModuleService.updateAvatar(uid,avatar,uname);//返回路径给前端页面,用于展示头像使用return new JsonResult<>(ok,avatar);
}

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

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

相关文章

螺旋矩阵 II——力扣59

文章目录 题目描述法一 模拟 题目描述 法一 模拟 初始化一个二维向量&#xff0c;名为matrix&#xff0c;它有n行和n列。向量的每个元素都是一个整数&#xff0c;初始化为0。初始化二维向量的语法如下&#xff1a;vector<vector<int>> matrix(n, vector<int>…

WPS本地镜像化在线文档操作以及样例

一个客户项目有引进在线文档操作需求&#xff0c;让我这边做一个demo调研下&#xff0c;给我的对接文档里有相关方法的说明&#xff0c;照着对接即可。但在真正对接过程中还是踩过不少坑&#xff0c;这儿对之前的对接工作做个记录。 按照习惯先来一个效果&#xff1a; Demo下载…

MySQL批量添加表字段命令

快捷命令&#xff1a; ALTER TABLE users ADD COLUMN age INT(11) DEFAULT 0 COMMENT 年龄, ADD COLUMN birth_place VARCHAR(30) DEFAULT COMMENT 出生地区, ADD COLUMN name VARCHAR(20) DEFAULT COMMENT 姓名; 复制代码

MVC异常处理类

package com.qf.common;import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.ExceptionHandler;/*** 统一异常处理类*/ ControllerAdvice public class MyExceptionHandler {ExceptionHandler(NullPointerExcep…

【phaser微信抖音小游戏开发002】hello world!

执行效果&#xff1a; 将以下代码文本内容&#xff0c;放入到game.js中即可。目录结构如下图 import ./js/libs/weapp-adapter import ./js/libs/symbolGameGlobal.window.scrollTo () > { };//防止真机出错 import Phaser from ./js/phaser//引入Phaservar {windowWidth, …

vue项目环境 搭建

1、安装nodejs 2、安装vue-cli, npm i -g vue/cli-init 3、初始化项目 vue init webpack test 4、运行 cd test npm run dev

PostgreSQL实战-pg13主从复制切换测试

PostgreSQL实战-pg13主从复制切换测试 配置PostgreSQL的环境变量 修改/etc/profile文件, vim /etc/profile添加如下内容: # 指定postgres的数据位置 export PGDATA=/var/lib/pg13/data数据联动测试 清空数据表数据 TRUNCATE TABLE tablename;主库清空数据表数据 从库对…

Blazor 自定义可重用基础组件之 Select 更新版

上次的Select能用&#xff0c;但有缺陷&#xff0c;当值改变时&#xff0c;没有引发一个属于EditForm的值改变事件&#xff0c;就是说还没有连接到表单&#xff0c;功能不完善。另外&#xff0c;像较为低层的input、select控件&#xff0c;其值只能接受string或其更低层的objec…

无人机影像配准并发布(共线方程)

无人机影像 DEM 计算四个角点坐标&#xff08;刚性变换&#xff09; 像空间坐标&#xff08;x,y,-f&#xff09; 像空间坐标畸变纠正 deltax,deltay 已知(x,y)&#xff0c;求解(X,Y, Z)或者(Lat,Lon) 这里的Z是DEM上获取的坐标和Zs为相机坐标的高程&#xff0c;如果均为已…

应用无线鼠标中的2.4GHz无线收发芯片

无线键盘和无线鼠标作为现代办公环境中常见的工具&#xff0c;为我们的工作带来了便利。无线键盘和无线鼠标的工作原理都是基于无线技术实现的&#xff0c;其中常见的是2.4GHz无线技术。让我们一起来详细了解一下它们的工作原理。 无线鼠标的原理非常简单,鼠标部分工作与传统鼠…

html富文本编辑器

接了个单子&#xff0c;需要添加一个文章模块&#xff0c;一看用到的技术这么老&#xff0c;人傻了&#xff0c;纯html css js 。 在普通页面中 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"…

为Win12做准备?微软Win11 23H2将集成AI助手:GPT4免费用

微软日前确认今年4季度推出Win11 23H2&#xff0c;这是Win11第二个年度更新。 Win11 23H2具体有哪些功能升级&#xff0c;现在还不好说&#xff0c;但它会集成微软的Copilot&#xff0c;它很容易让人想到多年前的“曲别针”助手&#xff0c;但这次是AI技术加持的&#xff0c;Co…

一些高频的C++ cache line面试

C那些事之False Sharing与Cache line 最近看到一段代码&#xff0c;手动做的对齐&#xff0c;于是研究一下不对齐又会带来什么影响&#xff1f; template <typename T> class AtomicWithPadding {private:static constexpr int kCacheLineSize 64;uint8_t padding_befor…

牛客网Verilog刷题——VL46

牛客网Verilog刷题——VL46 题目解析答案 题目 根据题目提供的双口RAM代码和接口描述&#xff0c;实现同步FIFO&#xff0c;要求FIFO位宽和深度参数化可配置。电路的接口如下图所示。   双口RAM端口说明&#xff1a; 同步FIFO端口说明&#xff1a; 双口RAM代码如下&#xff…

网络安全 Day24-select高级用法和多表连接

select高级用法和多表连接 1. select 多子句单表高级实践1.1 select 多子句高级语法1.2 聚合函数1.3 group by 实践1.4 having 筛选1.5 order by 排序1.6 limit 2. 多表连接 1. select 多子句单表高级实践 1.1 select 多子句高级语法 where 和 having 区别是后者是分组后进行…

邪恶版ChatGPT来了!

「邪恶版」ChatGPT 出现&#xff1a;每月 60 欧元&#xff0c;毫无道德限制&#xff0c;专为“网络罪犯”而生。 WormGPT 并不是一个人工智能聊天机器人&#xff0c;它的开发目的不是为了有趣地提供无脊椎动物的人工智能帮助&#xff0c;就像专注于猫科动物的CatGPT一样。相反&…

nginx 超时问题 - 解决方法

nginx.conf 配置模板&#xff1a; http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 120s;server {listen 80;server_name localhost;################################## 1keepalive_timeout 600s;###…

【C++入门到精通】C++入门 —— 类和对象(构造函数、析构函数)

目录 一、类的6个默认成员函数 二、构造函数 ⭕构造函数概念 ⭕构造函数的特点 ⭕常见构造函数的几种类型 三、析构函数 ⭕析构函数概念 ⭕析构函数的特点 ⭕常见析构函数的几种类型 四、温馨提示 前言 这一篇文章是上一篇的续集&#xff08;这里有上篇链接&#xff09;…

Flink非对齐checkpoint原理(Flink Unaligned Checkpoint)

Flink非对齐checkpoint原理&#xff08;Flink Unaligned Checkpoint&#xff09; 为什么提出Unaligned Checkpoint&#xff08;UC&#xff09;&#xff1f; 因为反压严重时会导致Checkpoint失败&#xff0c;可能导致如下问题 恢复时间长-服务效率低非幂等和非事务会导致数据…

5分钟快手入门laravel邮件通知

第一步&#xff1a; 生成一个邮件发送对象 php artisan make:mail TestMail 第二步&#xff1a; 编辑.env 添加/修改&#xff08;没有的key则添加&#xff09; MAIL_DRIVERsmtp MAIL_HOSTsmtp.163.com &#xff08;这里用163邮箱&#xff09; MAIL_PORT25 &#xff08;163邮箱…