peixue-dev/peidu/Archive/一次性文件/[一次性]图片上传部署指南-2026-01-25.md

# 图片上传功能部署指南

## 📋 部署步骤

### 1. 服务器端配置

#### 1.1 创建图片存储目录
```bash
# SSH登录服务器后执行
mkdir -p /www/wwwroot/px.ddn-ai.cloud/Image
chmod 755 /www/wwwroot/px.ddn-ai.cloud/Image
```

#### 1.2 更新Nginx配置
将 `[一次性]nginx配置-图片上传-2026-01-25.conf` 的内容复制到服务器的Nginx配置文件中:

```bash
# 编辑Nginx配置
vi /www/server/panel/vhost/nginx/px.ddn-ai.cloud.conf

# 重新加载Nginx
nginx -t
nginx -s reload
```

### 2. 后端配置

#### 2.1 本地开发环境
在 `application.yml` 中已配置:
- 本地路径: `D:/peidu-uploads/`
- 会自动创建目录

#### 2.2 生产环境
在 `application.yml` 中已配置:
- 服务器路径: `/www/wwwroot/px.ddn-ai.cloud/Image/`
- 访问URL: `https://px.ddn-ai.cloud/uploads/`

**代码会自动判断操作系统**:
- Windows → 使用本地路径
- Linux → 使用服务器路径

### 3. 测试上传功能

#### 3.1 使用Postman测试
```
POST https://px.ddn-ai.cloud/api/file/upload
Content-Type: multipart/form-data

Body:
- file: 选择图片文件
```

#### 3.2 预期返回
```json
{
  "code": 200,
  "message": "上传成功",
  "data": {
    "fileName": "20260125_abc123def456.jpg",
    "fileUrl": "https://px.ddn-ai.cloud/uploads/20260125_abc123def456.jpg",
    "fileSize": "123456",
    "fileType": "jpg"
  }
}
```

#### 3.3 访问图片
直接在浏览器访问返回的 `fileUrl`,应该能看到图片。

### 4. 前端集成示例

#### 4.1 小程序上传
```javascript
// 选择图片
wx.chooseImage({
  count: 1,
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0]
    
    // 上传图片
    wx.uploadFile({
      url: 'https://px.ddn-ai.cloud/api/file/upload',
      filePath: tempFilePath,
      name: 'file',
      header: {
        'Authorization': 'Bearer ' + wx.getStorageSync('token')
      },
      success: (uploadRes) => {
        const data = JSON.parse(uploadRes.data)
        if (data.code === 200) {
          console.log('图片URL:', data.data.fileUrl)
          // 保存图片URL到数据库
        }
      }
    })
  }
})
```

#### 4.2 管理后台上传
```vue
<template>
  <el-upload
    action="https://px.ddn-ai.cloud/api/file/upload"
    :headers="{ Authorization: 'Bearer ' + token }"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      token: localStorage.getItem('token')
    }
  },
  methods: {
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt10M = file.size / 1024 / 1024 < 10
      
      if (!isImage) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      if (!isLt10M) {
        this.$message.error('图片大小不能超过10MB!')
        return false
      }
      return true
    },
    handleSuccess(response) {
      if (response.code === 200) {
        this.$message.success('上传成功')
        console.log('图片URL:', response.data.fileUrl)
      }
    }
  }
}
</script>
```

### 5. 常见问题

#### 5.1 上传失败: 403 Forbidden
**原因**: 目录权限不足
**解决**: 
```bash
chmod 755 /www/wwwroot/px.ddn-ai.cloud/Image
```

#### 5.2 图片无法访问: 404 Not Found
**原因**: Nginx配置未生效
**解决**:
```bash
nginx -t  # 检查配置
nginx -s reload  # 重新加载
```

#### 5.3 本地开发无法上传
**原因**: 本地目录不存在
**解决**: 程序会自动创建,或手动创建 `D:/peidu-uploads/`

### 6. 安全建议

1. **限制文件类型**: 已配置只允许图片格式
2. **限制文件大小**: 已配置最大10MB
3. **文件名随机化**: 使用日期+UUID避免冲突和猜测
4. **定期清理**: 建议定期清理无用图片

### 7. 目录结构

```
服务器:
/www/wwwroot/px.ddn-ai.cloud/
├── Image/                    # 图片存储目录
│   ├── 20260125_xxx.jpg
│   ├── 20260125_yyy.png
│   └── ...
├── admin/                    # 管理后台
└── miniapp/                  # 小程序静态资源

本地:
D:/peidu-uploads/             # 本地图片存储
├── 20260125_xxx.jpg
└── ...
```

### 8. 监控和维护

#### 8.1 查看上传日志
```bash
# 后端日志
tail -f /path/to/backend.log | grep "上传图片"

# Nginx访问日志
tail -f /www/wwwlogs/px.ddn-ai.cloud.log | grep "/uploads/"
```

#### 8.2 磁盘空间监控
```bash
# 查看目录大小
du -sh /www/wwwroot/px.ddn-ai.cloud/Image

# 查看磁盘使用情况
df -h
```

## ✅ 部署完成检查清单

- [ ] 服务器创建了 `/www/wwwroot/px.ddn-ai.cloud/Image` 目录
- [ ] 目录权限设置为 755
- [ ] Nginx配置已更新并重新加载
- [ ] 后端代码已部署
- [ ] 使用Postman测试上传成功
- [ ] 图片URL可以正常访问
- [ ] 前端集成测试通过

## 📞 技术支持

如有问题,请检查:
1. 后端日志: 查看上传过程的详细信息
2. Nginx日志: 查看图片访问请求
3. 目录权限: 确保后端进程有写入权限