228 lines
5.0 KiB
Markdown
228 lines
5.0 KiB
Markdown
# 图片上传功能部署指南
|
|
|
|
## 📋 部署步骤
|
|
|
|
### 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. 目录权限: 确保后端进程有写入权限
|