live-forum/前端/文档

文件上传服务架构说明

📁 目录结构

utils/
  ├── IServer/
  │   ├── IUploadService.js      # 上传服务接口（抽象基类）
  │   ├── UploadFactory.js       # 工厂类（创建上传服务实例）
  │   └── README.md              # 本文档
  ├── CosUploadService.js        # 腾讯云COS上传服务实现
  └── CosUpload.js               # 旧版（保留兼容性）

🎯 设计模式

采用 策略模式 + 工厂模式：

• 策略模式: 定义统一的上传接口（IUploadService），不同的上传方式实现该接口
• 工厂模式: 通过工厂类（UploadFactory）创建具体的上传服务实例

✨ 优势

1. 易扩展: 添加新的上传方式只需实现接口，无需修改现有代码
2. 易切换: 通过工厂类切换不同的上传服务
3. 解耦合: 业务代码不依赖具体的上传实现
4. 易测试: 可以轻松mock上传服务进行测试

🚀 快速开始

方式一：使用工厂创建（推荐）

import { AppServer } from '../../modules/api/AppServer.js'
import UploadFactory from '../../utils/IServer/UploadFactory.js'

// 创建上传服务
const appServer = new AppServer()
const uploadService = UploadFactory.create(
  'cos',  // 服务类型
  async (key) => await appServer.GetCosSign(key),  // 签名函数
  {
    // 可选配置
    imageQuality: 80,
    imageMaxSize: 10 * 1024 * 1024,
    videoMaxSize: 100 * 1024 * 1024,
    cosDomain: 'https://miaoyu-1308826010.cos.ap-shanghai.myqcloud.com'
  }
)

// 上传文件
const result = await uploadService.uploadFile(filePath, 'images')
if (result.success) {
  console.log('文件URL:', result.data)
}

方式二：直接创建实例

import CosUploadService from '../../utils/CosUploadService.js'

const uploadService = new CosUploadService(
  async (key) => await appServer.GetCosSign(key),
  { imageQuality: 90 }
)

📝 如何添加新的上传服务

1. 创建上传服务类

// utils/MyUploadService.js
import IUploadService from './IServer/IUploadService.js'

class MyUploadService extends IUploadService {
  constructor(config) {
    super()
    this.config = config
  }

  async uploadFile(filePath, folder = 'images') {
    try {
      // 实现你的上传逻辑
      const fileUrl = await this.doUpload(filePath)
      
      return {
        success: true,
        data: fileUrl
      }
    } catch (error) {
      return {
        success: false,
        error: error.message
      }
    }
  }

  async uploadFiles(filePaths, folder = 'images') {
    // 实现批量上传
    const results = []
    for (const path of filePaths) {
      const result = await this.uploadFile(path, folder)
      if (result.success) {
        results.push(result.data)
      }
    }
    return {
      success: true,
      data: results
    }
  }

  async getFileInfo(filePath) {
    // 实现获取文件信息
  }

  validateFile(fileType, fileSize) {
    // 实现文件验证
    return { success: true }
  }

  async doUpload(filePath) {
    // 你的实际上传逻辑
  }
}

export default MyUploadService

2. 注册服务

import UploadFactory from './IServer/UploadFactory.js'
import MyUploadService from './MyUploadService.js'

// 注册新服务
UploadFactory.register('myupload', MyUploadService)

3. 使用新服务

const uploadService = UploadFactory.create('myupload', config)
const result = await uploadService.uploadFile(filePath)

🔧 配置项说明

CosUploadService 配置

配置项	类型	默认值	说明
imageMaxSize	Number	10 * 1024 * 1024	图片最大大小（字节）
videoMaxSize	Number	100 * 1024 * 1024	视频最大大小（字节）
imageQuality	Number	80	图片压缩质量（0-100）
cosDomain	String	miaoyu的COS域名	COS访问域名

📖 接口规范

IUploadService 接口方法

uploadFile(filePath, folder)

上传单个文件

参数:

• filePath (String): 本地文件路径
• folder (String): 文件夹名称，默认 'images'

返回: Promise