xiaoli/peixue-dev

Fork 0

xiaojiang e5624c2876 feat: 快速派单功能分离 & 后端配置优化

2026-02-28 16:11:51 +08:00

5.0 KiB

Raw Blame History

图片上传功能部署指南

📋 部署步骤

1. 服务器端配置

1.1 创建图片存储目录

# 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配置文件中:

# 编辑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 预期返回

{
  "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 小程序上传

// 选择图片
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 管理后台上传

<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

原因: 目录权限不足解决:

chmod 755 /www/wwwroot/px.ddn-ai.cloud/Image

5.2 图片无法访问: 404 Not Found

原因: Nginx配置未生效解决:

nginx -t  # 检查配置
nginx -s reload  # 重新加载

5.3 本地开发无法上传

原因: 本地目录不存在解决: 程序会自动创建,或手动创建 D:/peidu-uploads/

6. 安全建议

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

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 查看上传日志

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

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

8.2 磁盘空间监控

# 查看目录大小
du -sh /www/wwwroot/px.ddn-ai.cloud/Image

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

✅ 部署完成检查清单

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

📞 技术支持

如有问题,请检查:

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

5.0 KiB Raw Blame History