关于记录一下“bug”,在做图片上传的时候出现的小问题

项目场景:

之前的话写过csdn,最近出现了一些小事情,所以耽误了好久没有更新,最近把以前的项目拿出来然后改了下环境就出现了一些问题,该项目使用SpringBoot3.5 + SpringMVC + Mybatis-Plus3.5.0,然后权限控制采用的是SpringSecurity等,因为问题主要出现在这几个部分,所以我就不介绍项目的废话了,直接开始。


问题描述

在修改项目版本的时候,旧版本很多的一些东西都被优化掉了,最近遇见的主要问题就是三个:1.版本与版本不兼容的问题;2.mysql数据库突然无法使用,密码连接失效;3.上传产品图片时出现控制台不报错但是无法显示图片的情况;如果有朋友是因为1,2出了问题的话可以去博客园,里面有解决的具体办法,我今天主要写的是图片上传失败问题。


原因分析:

原本的代码主要出现的问题是:

  1. 缺少 CSRF 防护

    • 未携带 CSRF Token,在 Spring Security 环境下会被拦截,导致请求失败(403 错误)。

    • 存在安全风险,容易受到跨站请求伪造(CSRF)攻击。

  2. 响应数据处理不够健壮

    • 直接访问 result.data[0],未校验 result.data 是否存在或是否为空数组,可能导致 TypeError(如 Cannot read properties of undefined)。

    • 没有错误处理逻辑,上传失败时用户无明确反馈。

  3. 代码可读性和维护性较差

    • 未对关键变量(如图片 URL)进行提取,代码逻辑不够清晰。

    • 缺少必要的注释,不利于后续维护。

之后修改完的代码与原本的代码相比优点:

  1. 安全性更高:集成 CSRF 防护,避免被 Spring Security 拦截或遭受攻击。

  2. 代码更健壮:通过变量提取和结构化编写,减少潜在错误。

  3. 更易维护:清晰的代码风格便于后续扩展和调试。

这个改进建议是我去将改好的代码发给AI给的建议

  • 补充 error 回调,处理网络或服务器错误。

  • 增加响应数据校验(如检查 response.errnoresponse.data 是否有效)。

我后面用的代码没有采用AI的建议,需要的朋友可以为了防止出现问题可以去根据建议优化一下。


解决方案:

解决这个问题主要分两步:

1.在需要的.html文件header头部中,通过代码以下代码片段一,直接复制到里面即可;

2.在做上传文件的div里面,去加上下面的<script>标签中的代码,相关修改代码片段一,片段二代码如下:

javascript 复制代码
// 代码片段一

<header>
<meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</header>



// 获取 Token 和 Header 名称
const token = document.querySelector('meta[name="_csrf"]').content;
const header = document.querySelector('meta[name="_csrf_header"]').content;

// 在 AJAX 请求中添加 CSRF 头
fetch("/api/submit", {
    method: "POST",
    headers: {
        [header]: token  // 动态使用 header 名
    }
});
javascript 复制代码
// 代码片段二
                   <script>
                        $("#pImageFile").change(function() {
                            $("#uploadPImage").ajaxSubmit({
                                url: "/backstage/product/upload",
                                type: "post",
                                headers: {
                                    "X-CSRF-TOKEN": $("meta[name='_csrf']").attr("content")
                                },
                                success: function(response) {
                                    // 安全访问数组元素
                                    // 图片上传成功后,图片回显到pImage上
                                    const imageUrl = response.data[0];
                                    $("#pImage").attr("src", imageUrl);
                                    // 上传成功后,图片地址存储在hiddenPImage中
                                    $("#hiddenPImage").val(imageUrl);

                                }
                            });
                        });
                    </script>

最后,也希望有更好的办法的话反馈给我,一起学习,谢谢大家了!!!

相关推荐
太阳伞下的阿呆1 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
seabirdssss1 小时前
错误: 找不到或无法加载主类 原因: java.lang.ClassNotFoundException
java·开发语言
还是鼠鼠1 小时前
tlias智能学习辅助系统--SpringAOP-进阶-通知顺序
java·后端·mysql·spring·mybatis·springboot
飞翔的佩奇1 小时前
基于SpringBoot+MyBatis+MySQL+VUE实现的名城小区物业管理系统(附源码+数据库+毕业论文+开题报告+部署教程+配套软件)
数据库·vue.js·spring boot·mysql·毕业设计·mybatis·小区物业管理系统
gnawkhhkwang1 小时前
io_getevents 和 io_pgetevents 系统调用及示例
linux·c语言·开发语言
喵手1 小时前
使用ASIWebPageRequest库编写Objective-C下载器程序
开发语言·macos·objective-c
Pitayafruit2 小时前
Spring AI 进阶之路01:三步将 AI 整合进 Spring Boot
spring boot·后端·ai编程
weixin_456904272 小时前
C#泛型委托讲解
开发语言·c#
技术不支持2 小时前
Qt Creator 11.0.3 语法高亮bug问题
java·服务器·数据库·qt·bug