175 lines
3.6 KiB
Markdown
175 lines
3.6 KiB
Markdown
# 图片上传最终解决方案
|
||
|
||
## 当前状态
|
||
|
||
✅ 上传接口已实现 (`/api/file/upload`)
|
||
✅ 前端可以选择文件并发送请求
|
||
✅ 后端接收到文件 (92656 bytes)
|
||
✅ Vite代理配置已修复 (8089端口)
|
||
✅ 配置已改为本地保存模式
|
||
❌ 文件保存过程出现问题（日志中断）
|
||
|
||
## 问题分析
|
||
|
||
从日志看，请求在 `FileUploadController` 接收到文件后就停止了，说明：
|
||
1. `fileUploadService.uploadFile(file)` 调用时出现了异常
|
||
2. 异常被捕获但没有记录详细日志
|
||
3. 可能是目录权限或路径问题
|
||
|
||
## 解决方案
|
||
|
||
### 方案1: 使用更简单的本地路径（推荐）
|
||
|
||
修改 `application.yml`:
|
||
|
||
```yaml
|
||
file:
|
||
upload:
|
||
mode: local
|
||
local-path: C:/peidu-uploads/ # 使用C盘，避免权限问题
|
||
url-prefix: http://localhost:8089/uploads/
|
||
```
|
||
|
||
### 方案2: 检查D盘权限
|
||
|
||
如果坚持使用D盘：
|
||
1. 手动创建 `D:/uploads/` 目录
|
||
2. 右键 → 属性 → 安全 → 确保当前用户有完全控制权限
|
||
|
||
### 方案3: 使用用户目录
|
||
|
||
最安全的方式：
|
||
|
||
```yaml
|
||
file:
|
||
upload:
|
||
mode: local
|
||
local-path: ${user.home}/peidu-uploads/ # 使用用户主目录
|
||
url-prefix: http://localhost:8089/uploads/
|
||
```
|
||
|
||
## 完整配置示例
|
||
|
||
### application.yml
|
||
|
||
```yaml
|
||
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
|
||
|
||
```javascript
|
||
server: {
|
||
port: 5173,
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://localhost:8089', // 注意是8089端口
|
||
changeOrigin: true
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 测试步骤
|
||
|
||
### 1. 修改配置
|
||
选择上面的方案1，使用 `C:/peidu-uploads/`
|
||
|
||
### 2. 重新编译后端
|
||
```bash
|
||
# 如果使用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. **清空旧轮播图数据**
|
||
```sql
|
||
DELETE FROM banner;
|
||
```
|
||
|
||
2. **重新上传新轮播图**
|
||
使用管理后台上传
|
||
|
||
3. **切换回远程模式**（可选）
|
||
如果需要上传到服务器，改回 `mode: remote`
|
||
|
||
## 快速修复命令
|
||
|
||
```bash
|
||
# 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
|
||
```
|
||
|
||
前端应该显示上传成功，并能看到图片预览。
|