peixue-dev/peidu/Archive/一次性文件/[一次性]图片上传最终解决方案-2026-01-25.md

3.6 KiB
Raw Permalink Blame History

图片上传最终解决方案

当前状态

上传接口已实现 (/api/file/upload) 前端可以选择文件并发送请求 后端接收到文件 (92656 bytes) Vite代理配置已修复 (8089端口) 配置已改为本地保存模式 文件保存过程出现问题(日志中断)

问题分析

从日志看,请求在 FileUploadController 接收到文件后就停止了,说明:

  1. fileUploadService.uploadFile(file) 调用时出现了异常
  2. 异常被捕获但没有记录详细日志
  3. 可能是目录权限或路径问题

解决方案

方案1: 使用更简单的本地路径(推荐)

修改 application.yml:

file:
  upload:
    mode: local
    local-path: C:/peidu-uploads/    # 使用C盘避免权限问题
    url-prefix: http://localhost:8089/uploads/

方案2: 检查D盘权限

如果坚持使用D盘

  1. 手动创建 D:/uploads/ 目录
  2. 右键 → 属性 → 安全 → 确保当前用户有完全控制权限

方案3: 使用用户目录

最安全的方式:

file:
  upload:
    mode: local
    local-path: ${user.home}/peidu-uploads/    # 使用用户主目录
    url-prefix: http://localhost:8089/uploads/

完整配置示例

application.yml

spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB

file:
  upload:
    mode: local
    local-path: C:/peidu-uploads/
    url-prefix: http://localhost:8089/uploads/
    allowed-types: jpg,jpeg,png,gif,bmp,webp
    max-size: 10

vite.config.js

server: {
  port: 5173,
  proxy: {
    '/api': {
      target: 'http://localhost:8089',  // 注意是8089端口
      changeOrigin: true
    }
  }
}

测试步骤

1. 修改配置

选择上面的方案1使用 C:/peidu-uploads/

2. 重新编译后端

# 如果使用IDE点击 Build → Rebuild Project
# 如果使用Maven命令行
cd peidu/backend
mvn clean compile

3. 重启后端

停止并重新启动后端服务

4. 测试上传

在管理后台上传一张图片,查看:

  • 后端日志输出
  • C:/peidu-uploads/ 目录是否有文件
  • 前端是否显示成功

5. 验证访问

如果上传成功在浏览器中访问返回的URL

http://localhost:8089/uploads/20260125_xxx.png

应该能看到图片。

常见问题

Q1: 后端日志还是在同一个地方停止

A: 代码没有重新编译需要Rebuild项目

Q2: 提示"无法创建目录"

A: 权限问题换成C盘或用户目录

Q3: 上传成功但访问404

A: 静态资源映射问题,检查 FileStorageConfig.java

Q4: 前端显示"文件大小不能超过10485760MB"

A: 这是显示bug实际限制是10MB不影响功能

下一步

上传功能测试通过后:

  1. 清空旧轮播图数据

    DELETE FROM banner;
    
  2. 重新上传新轮播图 使用管理后台上传

  3. 切换回远程模式(可选) 如果需要上传到服务器,改回 mode: remote

快速修复命令

# 1. 创建上传目录
mkdir C:\peidu-uploads

# 2. 重新编译后端
cd peidu/backend
mvn clean compile

# 3. 重启后端服务

# 4. 测试上传

预期结果

上传成功后,后端日志应该显示:

=== 上传图片(智能模式) ===
文件名: xxx.png
文件大小: 92656 bytes
上传模式: local
使用本地保存模式
本地保存路径: C:/peidu-uploads/
文件保存成功: C:\peidu-uploads\20260125_xxx.png
返回URL: http://localhost:8089/uploads/20260125_xxx.png

前端应该显示上传成功,并能看到图片预览。