CSDN博文一：SpringBoot+原生HTML失物招领系统搭建全过程｜文件上传报错「当前不支持该文件类型」踩坑解决实录

标签

#SpringBoot #MyBatis-Plus #前后端分离 #文件上传 #实训项目 #HTML前端

正文

一、项目前言

本次课程实训开发简易失物招领平台，架构分为两部分：

1. 后端：SpringBoot + MyBatis-Plus + MySQL，提供用户登录、失物/招领发布、图片上传、数据CRUD全套接口；
2. 前端：纯原生HTML+JS（index.html单页面），无Vue/ElementUI框架，轻量易部署，实现表单提交、文件上传、列表渲染。

开发过程中遇到一个核心报错：上传图片时前端弹出提示当前不支持该文件类型，请尝试其他文件，本篇完整记录环境搭建流程+该报错根源排查+全套解决方案，避开网上千篇一律的通用搭建教程，全部为本项目真实踩坑。

二、整体技术栈清单

后端技术

• 核心框架：SpringBoot 2.7.x
• 持久层：MyBatis-Plus 3.5.3
• 数据库：MySQL 8.0（库名：lostfound_db）
• 文件处理：Spring自带MultipartFile本地存储
• 工具：Lombok、Maven
• 配置：全局跨域、静态资源映射、文件上传大小限制

前端技术

• 基础：原生HTML、JavaScript、Fetch请求
• 存储：localStorage保存登录用户信息
• 文件处理：FileReader本地预览、FormData传输图片文件

三、后端完整搭建步骤

1. 数据库设计

新建数据库 lostfound_db，字符集 utf8mb4，三张核心数据表：

1. user 用户表：id、username、password
2. lost_item 失物表：id、username、name、location、date、status、image
3. found_item 招领表：id、username、name、location、date、status、image

主键id均设置自增，image字段存储图片相对访问路径。

2. SpringBoot项目初始化，依赖引入与后端项目目录截图

新建Maven工程，pom.xml核心依赖：web、mysql驱动、mybatis-plus、lombok、文件上传依赖。
后端项目目录

3. application.yml核心配置（重点文件上传、静态资源）

# 数据库配置
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/lostfound_db?useUnicode=true&characterEncoding=utf8
    username: root
    password: 123456
  # 文件上传配置
  servlet:
    multipart:
      max-file-size: 20MB
      max-request-size: 100MB
# MyBatis-Plus配置
mybatis-plus:
  configuration:
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

4. 核心基础类编写

1. 统一返回结果类 R<T>：规范所有接口返回200成功/500失败；
2. 全局跨域配置类：解决HTML前端8080端口跨域拦截；
3. Web资源映射配置：映射 /uploads/** 路径读取本地上传图片；
4. 分层结构：Entity实体、Mapper、Service、Controller，基于MyBatis-Plus BaseMapper实现基础CRUD。

5. 后端文件上传核心逻辑

发布失物/招领接口接收 MultipartFile image 文件：

1. 判断文件非空，使用时间戳+UUID拼接文件名，防止重名覆盖；
2. 自动创建uploads文件夹，将文件写入本地；
3. 数据库仅保存 /uploads/文件名 访问路径；
4. 删除物品接口时，根据路径删除本地存储图片，释放磁盘空间。

四、原生HTML前端环境搭建（仅index.html单文件）

本项目未使用Vue、React，仅单页index.html完成全部功能，轻量化适合实训作业。

1. 页面功能划分：登录注册弹窗、失物/招领列表、发布表单、文件上传控件；
2. 请求封装：原生fetch封装接口，区分普通JSON请求和文件上传FormData请求；
3. 登录状态：登录成功将用户名存入localStorage，页面刷新自动读取；
4. 图片处理：FileReader实现上传前本地预览，图片加载失败设置兜底占位图。

前端上传文件核心代码片段

// 提交发布表单
function submitForm() {
  let formData = new FormData();
  // 文本参数
  formData.append("name", itemName);
  formData.append("location", location);
  formData.append("date", date);
  formData.append("username", localStorage.getItem("user"));
  // 文件对象
  formData.append("image", fileObj);

  fetch("http://localhost:8080/api/lost/add", {
    method: "POST",
    body: formData
  }).then(res => res.json()).then(data => {
    if (data.code === 200) {
      alert("发布成功");
      getList();
    } else {
      // 后端返回错误提示，前端弹窗展示
      alert(data.msg);
    }
  })
}

五、核心报错：上传图片提示「当前不支持该文件类型，请尝试其他文件」完整排查

1. 报错场景

在index.html页面上传jpg/png图片时，系统弹窗提示：当前不支持该文件类型，请尝试其他文件，文件无法提交到后端。

2. 三大根因&分步解决方案

原因1：前端未做文件后缀白名单校验（最主要原因）

前端上传控件未限制文件格式，若用户上传exe、txt、zip等文件，后端拦截后返回提示；即便上传图片，代码判断逻辑写错也会误报。
解决：前端增加文件类型校验，仅允许jpg、jpeg、png、webp格式：

// 文件类型校验
const allowType = ["image/jpg","image/jpeg","image/png","image/webp"];
if(!allowType.includes(fileObj.type)){
  alert("当前不支持该文件类型，请尝试其他文件");
  return;
}

原因2：后端未配置允许的文件格式校验

后端接口增加文件MIME类型校验，过滤非图片文件，不合法文件直接返回错误信息，前端接收后弹窗提示。

原因3：文件名后缀异常、空文件

上传空文件、无后缀图片，前后端双重校验拦截，统一抛出文件类型不支持提示。

3. 完整优化方案

1. 前端前置校验：上传前判断文件MIME类型、文件大小，不符合直接弹窗阻断请求；
2. 后端二次校验：接口接收MultipartFile后再次校验，防止前端校验被绕过；
3. 统一错误文案：校验失败统一返回「当前不支持该文件类型，请尝试其他文件」，和项目报错提示保持一致。

六、搭建阶段其他高频踩坑整理

1. MyBatis-Plus下划线转驼峰失效
   yml未开启map-underscore-to-camel-case: true，实体类字段查询全部为空，开启后重启项目解决。
2. 前端图片地址404无法展示
   后端未配置静态资源映射，无法访问uploads文件夹下图片，新增WebMvcConfig配置映射路径。
3. 跨域OPTIONS请求被拦截
   仅使用Controller局部@CrossOrigin注解存在局限性，全局Cors配置放行所有源、请求头、请求方式。
4. 上传图片超出大小限制报错
   默认单文件仅1MB，yml手动配置20MB单文件、100MB总请求大小。
5. 删除数据本地图片残留
   删除接口先查询图片路径，判断文件存在后执行删除，再删除数据库记录，避免磁盘冗余文件。

七、搭建总结

1. 本项目采用SpringBoot+原生HTML极简架构，无需复杂前端框架，适合课程实训；
2. 文件上传是本项目核心难点，前后端双重文件类型校验是解决「不支持该文件类型」报错的关键；
3. 搭建流程顺序建议：数据库→后端接口开发→Postman测试接口→前端页面开发→前后端联调；
4. 所有配置、代码、报错均为本项目真实开发记录，区别于网上通用模板，可直接用于实训报告参考。